พิจารณาใบอนุญาตเช่น:
ฉันจะใช้ตระกูลตัวอักษรของ Ubuntu บนเว็บไซต์ใด ๆ โดยไม่ทำให้ผู้ใช้ติดตั้งได้อย่างไร
โอกาสใด ๆ ที่จะใช้กับเครื่องมือเช่น: http://code.google.com/intl/th-th/apis/webfonts/
ฝังแบบอักษร Ubuntu บนหน้าเว็บใด ๆ
คำตอบ:
มี 2 วิธีที่คุณสามารถฝังแบบอักษร Ubuntu ในเว็บไซต์ของคุณได้ - ใช้ Google Font Directory (แนะนำ) หรือใช้การ@font-faceประกาศ CSS และแปลงแบบอักษรของคุณด้วยตนเอง
ใช้ Google Webfonts
ตอนนี้คุณสามารถใช้แบบอักษร Ubuntu เป็นแบบอักษรเว็บของ Google สิ่งนี้จะทำให้กระบวนการง่ายขึ้นมาก เนื้อหาส่วนใหญ่ของการเป็นส่วนหนึ่งของคำตอบนี้มาจากคำตอบของสเลดัน
เหตุใดการใช้ Google Font API จึงเป็นวิธีที่ต้องการ
การใช้ Google Font API เป็นข้อเสนอแนะที่ยอดเยี่ยมเนื่องจากช่วยให้ webfonts สามารถทำงานกับเบราว์เซอร์สมัยใหม่ทั้งหมดโดยอัตโนมัติโดยไม่ต้องกังวลเกี่ยวกับรายละเอียด การใช้แบบอักษร API หมายความว่าผู้เข้าชมจะเห็นแบบอักษรรุ่นล่าสุดโดยอัตโนมัติ
ฉันจะใช้ Google Font API ได้อย่างไร
ตั้งแต่วันที่ 21 ธันวาคม 2010 ตระกูล Font ของ Ubuntu ได้รวมและปรับใช้จาก Google Font API แล้วให้ไปที่:
คุณสามารถอ่านGoogle Web Fontเกี่ยวกับข่าวและจากนั้น:
- เปิดไดเรกทอรีแบบอักษรของ Google: หน้า " Ubuntu - ใช้แบบอักษรนี้ "
ทำเครื่องหมายการรวมกันของน้ำหนักและสไตล์จาก Regular, Italic, Bold และ Bold-Italic ที่คุณต้องการสำหรับหน้าเว็บของคุณ
หากค่าเริ่มต้นไม่ถูกต้องเลือกชุดภาษา / สคริปต์ที่คุณต้องการ: เว็บไซต์รัสเซียที่มีตัวอย่างภาษาอังกฤษอาจใช้ "Cyrillic, Latin"
เพิ่มที่ได้รับ
<link>แท็กระหว่าง<head> ... </head>อยู่ในหน้า HTML หรือแม่ของคุณและเพิ่มโค้ด CSS ที่เหมาะสมในระหว่างแท็กของคุณ<style> ... </style><head>ตัวอย่างเช่นหากคุณกำลังสร้างเว็บไซต์ไฮบริดรัสเซีย / อังกฤษและต้องการใช้แบบอักษรเป็นค่าเริ่มต้นสำหรับข้อความทั้งหมดคุณสามารถเพิ่มรหัสต่อไปนี้ระหว่าง
<head>แท็กของคุณ:<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' /> <style type="text/css" > body { font-family : 'Ubuntu', sans-serif; } </style>
หมายเหตุ :
"ละติน" เป็นสคริปต์ที่ใช้ภาษาอังกฤษและภาษายุโรปและแอฟริกาอื่น ๆ อีกมากมาย
"การจัดกลุ่ม" ปรับไฟล์ฟอนต์ให้เหมาะสมโดยส่งเฉพาะตัวอักษรสำหรับบางภาษาแบบอักษรอยู่ที่ประมาณ 44 กิโลไบต์ ตัวเลข 168 kB ที่แสดงในขณะนี้มีให้สำหรับร่ายมนตร์ 1,200+ รูปแบบอักษรสำหรับการดาวน์โหลดเว็บเดียวและส่วนใหญ่ไม่จำเป็นสำหรับเว็บไซต์เดียว
ไฟล์แบบอักษรของ Ubuntu จะถูกแปลงโดยอัตโนมัติในรูปแบบที่ถูกต้องสำหรับเบราว์เซอร์ที่แตกต่างกัน ขึ้นอยู่กับยี่ห้อและรุ่นรูปแบบที่ต้องการคือWOFF, EOT, หรือSVG TTFชุดค่าผสมที่ถูกต้องของ CSS นั้นขึ้นอยู่กับแต่ละคำขอของหน้าเว็บและแก้ปัญหาที่ยากนี้ได้อย่างน่าอัศจรรย์
ใช้ @ font-face
คุณสามารถฝังแบบอักษรอูบุนตูโดยการแปลงพวกเขาไปแบบอักษร WOFF จากนั้นคุณสามารถฝังไว้โดยใช้การประกาศแบบอักษร CSS @ แบบอักษร (.ttf ไฟล์) /usr/share/fonts/truetype/ubuntu-font-familyสามารถพบได้ใน
ตัวอย่างเช่นหากต้องการใช้แบบอักษร Ubuntu ปกติแปลงเป็นไฟล์ WOFF, Ubuntu-R.woff ให้ใช้รหัส CSS นี้:
@font-face
{
font-family : "Ubuntu-R";
src: url('Ubuntu-R.woff');
}
ในทำนองเดียวกันสำหรับ Ubuntu Bold:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-B.woff');
font-weight : bold;
}
ตัวเอียง Ubuntu:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-I.woff');
font-style : italic;
}
ตัวหนา Ubuntu:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-BI.woff');
font-weight : bold;
font-style : italic;
}
นี้ได้รับการสนับสนุนโดยทุกเบราว์เซอร์ที่ผ่านมา
การพิจารณา
โปรดจำไว้ว่าผู้ใช้บางคนตั้งค่าเบราว์เซอร์ให้ใช้ชุดแบบอักษรเฉพาะและอาจรำคาญหากใช้แบบอักษรที่กำหนดเอง และอ่านสิทธิ์การใช้งานแบบอักษรของ Ubuntuสำหรับเงื่อนไขที่แน่นอนเกี่ยวกับวิธีการแจกจ่ายแบบอักษร
@ DKuntz2 - ดีกว่าจริง ๆ ตอนนี้ฉันเปลี่ยนคำตอบแล้ว
—
dv3500ea
ไม่เข้าใจความจำเป็นในการคัดลอกคำตอบของภาระ ทำไมไม่เพียงแก้ไขมัน?
—
papukaija
ฉันตอบคำถามนี้เป็นเวลานานก่อนที่จะเลื่อนโดยสรุปวิธีการ @ font-face นี่คือก่อนที่จะเพิ่มแบบอักษรใน Google Font API (ซึ่งเป็นวิธีที่ดีกว่า) ฉันเพิ่มหมายเหตุสั้น ๆ เพียงจุดเริ่มต้นของคำตอบของฉันและลดคำตอบให้ครอบคลุมมากขึ้นและมีคำตอบที่ดีกว่าสำหรับการใช้วิธี google
—
dv3500ea
อย่างไรก็ตามในเวลานี้คำตอบของฉันได้รับการยอมรับและได้รับการสนับสนุนอย่างสูงและผลลัพธ์ก็คือผู้คนอาจคิดว่าพวกเขาควรใช้วิธีการ @ font-face ซึ่งเป็นที่นิยมน้อยกว่า sladen ติดต่อฉันทางอีเมลเกี่ยวกับเรื่องนี้และฉันตกลงที่จะเปลี่ยนคำตอบของฉันให้การระบุแหล่งที่มาตามใบอนุญาตครีเอทีฟคอมมอนส์ของเว็บไซต์นี้
—
dv3500ea
การใช้ Google Font API เป็นข้อเสนอแนะที่ยอดเยี่ยมเนื่องจากช่วยให้ webfonts สามารถทำงานกับเบราว์เซอร์สมัยใหม่ทั้งหมดโดยอัตโนมัติโดยไม่ต้องกังวลเกี่ยวกับรายละเอียด การใช้แบบอักษร API หมายความว่าผู้เข้าชมจะเห็นแบบอักษรรุ่นล่าสุดโดยอัตโนมัติ
ตั้งแต่วันที่ 21 ธันวาคม 2010 ตระกูล Font ของ Ubuntu ได้รวมและปรับใช้จาก Google Font API แล้วให้ไปที่:
คุณสามารถอ่านGoogle Web Fontเกี่ยวกับข่าวและจากนั้น:
- เปิดไดเรกทอรีแบบอักษรของ Google: หน้า " Ubuntu - ใช้แบบอักษรนี้ "
- ทำเครื่องหมายการรวมกันของน้ำหนักและสไตล์จาก Regular, Italic, Bold และ Bold-Italic ที่คุณต้องการสำหรับหน้าเว็บของคุณ
- หากค่าเริ่มต้นไม่ถูกต้องเลือกชุดภาษา / สคริปต์ที่คุณต้องการ: เว็บไซต์รัสเซียที่มีตัวอย่างภาษาอังกฤษอาจใช้ "Cyrillic, Latin"
- คัดลอกและวางCSS สองบรรทัดลงใน
<head> ... </head>และ<style>...</style>ส่วนของหน้า HTML หรือเทมเพลตของคุณ
หมายเหตุ:
"ละติน" เป็นสคริปต์ที่ใช้ภาษาอังกฤษและภาษายุโรปและแอฟริกาอื่น ๆ อีกมากมาย
"การจัดกลุ่ม" ปรับไฟล์ฟอนต์ให้เหมาะสมโดยส่งเฉพาะตัวอักษรสำหรับบางภาษาฟอนต์แต่ละตัวมีขนาดประมาณ 44 kB ตัวเลข 168 kB ที่แสดงในขณะนี้มีให้สำหรับร่ายมนตร์ 1,200+ รูปแบบอักษรสำหรับการดาวน์โหลดเว็บเดียวและส่วนใหญ่ไม่จำเป็นสำหรับเว็บไซต์เดียว
ไฟล์แบบอักษรของ Ubuntu จะถูกแปลงโดยอัตโนมัติในรูปแบบที่ถูกต้องสำหรับเบราว์เซอร์ที่แตกต่างกัน ขึ้นอยู่กับยี่ห้อและรุ่นรูปแบบที่ต้องการคือWOFF, EOT, หรือSVG TTFชุดค่าผสมที่ถูกต้องของ CSS นั้นขึ้นอยู่กับแต่ละคำขอของหน้าเว็บและแก้ปัญหาที่ยากนี้ได้อย่างน่าอัศจรรย์
การแสดงแบบอักษรฝั่งเซิร์ฟเวอร์ (ที่อาจจะดีกว่า "การแสดงผลแบบอักษรแบบไดนามิก") เป็นปัญหาที่น่าสนใจมาเป็นเวลานาน
ในทางเทคนิคดูเหมือนว่ามีเหตุผลที่เครื่องจะแสดงแบบอักษรเฉพาะควรติดตั้งแบบโลคัลแล้ว
ในทางกลับกันการออกแบบเว็บสูญเสียมากโดยต้องยึดติดกับ 'เว็บฟอนต์' พื้นฐาน / ที่รู้จักกันดี
CSS2.1 ได้ทำการปรับปรุงบางอย่างโดยใช้การประกาศกฎของfont-face
มันยังไม่ได้กลายเป็นมาตรฐาน แต่ในที่สุดมันก็จะใช้ CSS3
นอกจากนั้นยังมีวิธีอื่นสองสามวิธีเช่น:
ฉันหวังว่าลิงก์ที่ให้ไว้จะทำให้คุณมีความคิดที่ดีขึ้นเกี่ยวกับสิ่งที่สามารถทำได้ ;-)