โปรดจำไว้ว่าคำตอบของฉันมีอายุมาก
มีคำตอบที่ซับซ้อนกว่านี้ทางด้านเทคนิคเช่น:
ดังนั้นอย่าปล่อยให้ความจริงที่ว่านี่เป็นคำตอบที่ได้รับการยอมรับในปัจจุบันทำให้คุณรู้สึกว่านี่ยังเป็นคำตอบที่ดีที่สุด
ตอนนี้คุณสามารถดาวน์โหลดแบบอักษรทั้งหมดของ google ที่ตั้งค่าผ่าน github ได้ที่ที่เก็บแบบอักษร / google พวกเขายังมีซิป snapshot ~ 420MB ของตัวอักษรของพวกเขา
คุณดาวน์โหลดตัวเลือกแบบอักษรของคุณเป็นแพ็คเกจแบบซิปเพื่อให้คุณได้แบบอักษรจริงจำนวนมาก คัดลอกไปยังที่สาธารณะในที่ใดที่หนึ่งที่คุณสามารถลิงก์ไปยังจาก css ของคุณ
ในหน้าดาวน์โหลด Google webfont คุณจะพบลิงค์รวมดังนี้:
http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic|Candal
มันเชื่อมโยงไปยัง CSS ที่กำหนดแบบอักษรผ่านทางเครือที่@font-face
กำหนด
เปิดในเบราว์เซอร์เพื่อคัดลอกและวางลงใน CSS ของคุณเองและแก้ไข URL เพื่อรวมไฟล์ฟอนต์และรูปแบบที่ถูกต้อง
ดังนั้นนี่คือ:
@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 700;
src: local('Cantarell Bold'), local('Cantarell-Bold'), url(http://themes.googleusercontent.com/static/fonts/cantarell/v3/Yir4ZDsCn4g1kWopdg-ehHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
กลายเป็นสิ่งนี้:
/* Your local CSS File */
@font-face {
font-family: 'Cantarell';
font-style: normal;
font-weight: 700;
src: local('Cantarell Bold'), local('Cantarell-Bold'), url(../font/Cantarell-Bold.ttf) format('truetype');
}
อย่างที่คุณเห็นข้อเสียของการโฮสต์ฟอนต์ในระบบของคุณด้วยวิธีนี้คือคุณ จำกัด รูปแบบตัวอักษรที่แท้จริงในขณะที่บริการ google webfont กำหนดโดยอุปกรณ์ที่เข้าถึงซึ่งรูปแบบจะถูกส่ง
นอกจากนี้ฉันต้องเพิ่ม.htaccess
ไฟล์ไปยังไดเรกทอรีของฉันซึ่งถือฟอนต์ที่มีประเภท mime เพื่อหลีกเลี่ยงข้อผิดพลาดจากการโผล่ขึ้นมาใน Chrome Dev Tools
สำหรับการแก้ปัญหานี้จะมีเพียงประเภทความจริงเป็นสิ่งจำเป็น font-awesome
แต่การกำหนดมากขึ้นไม่เจ็บเมื่อคุณต้องการรวมแบบอักษรที่แตกต่างกันด้วยเช่น
#.htaccess
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff