ตัวอักษรเว็บของ CSS

กฎ @font-face ของ CSS

ตัวอักษรเว็บอนุญาตให้ผู้ออกแบบเว็บใช้ตัวอักษรที่ไม่มีการติดตั้งในคอมพิวเตอร์ผู้ใช้

เมื่อคุณหาหรือซื้อตัวอักษรที่ต้องการใช้ แค่ใส่ไฟล์ตัวอักษรในเซิร์ฟเวอร์ของคุณ มันจะดาวน์โหลดอัตโนมัติให้กับผู้ใช้เมื่อมีความจำเป็น

ตัวอักษรของคุณที่เป็นของตัวเองใน CSS @font-face ถูกกำหนดในกฎระเบียบ

รูปแบบตัวอักษรที่แตกต่างกัน

ตัวอักษร TrueType (TTF)

TrueType คือมาตราฐานตัวอักษรที่พัฒนาโดย Apple และ Microsoft ในช่วงปลายทศวรรษ 1980 และเป็นรูปแบบตัวอักษรที่เป็นไปยังที่สำคัญสำหรับระบบปฏิบัติการ Mac OS และ Microsoft Windows

ตัวอักษร OpenType (OTF)

OpenType คือรูปแบบตัวอักษรคอมพิวเตอร์ที่สามารถย่อขนาดได้ มันสร้างขึ้นบน TrueType และเป็นลิขสิทธิ์ของ Microsoft ในปัจจุบันตัวอักษร OpenType ได้รับการใช้งานทั่วไปในหลายแผงคอมพิวเตอร์หลัก

Web Open Font Format (WOFF)

WOFF คือรูปแบบตัวอักษรสำหรับเว็บ มันถูกพัฒนาในปี 2009 และปัจจุบันเป็นมาตราฐานที่แนะนำโดย W3C WOFF สามารถบีบบังคับและมีข้อมูลเพิ่มเติมเช่น OpenType หรือ TrueType มุ่งหมายที่จะสนับสนุนการแจกจ่ายตัวอักษรจากเซิร์ฟเวอร์ไปยังคลายนุตรีในเครือข่ายที่มีความเร็วของบีทที่จำกัด

Web Open Font Format (WOFF 2.0)

TrueType/OpenType ตัวอักษรมีการบีบบังคับที่ดีกว่า WOFF 1.0

ตัวอักษร SVG/รูปร่าง

ตัวอักษร SVG อนุญาตให้ใช้ SVG ในการแสดงข้อความตัวอักษร ตามกฎระเบียบ SVG 1.1 มีมอดูลตัวอักษร ซึ่งอนุญาตให้สร้างตัวอักษรในเอกสาร SVG คุณยังสามารถใช้ CSS ในเอกสาร SVG และกฎ @font-face สามารถนำไปปรับใช้กับข้อความในเอกสาร SVG

Embedded OpenType ตัวอักษร (EOT)

EOT ตัวอักษร EOT คือรูปแบบ OpenType ที่ Microsoft ออกแบบให้เป็นรูปแบบที่เข็มง่ายเพื่อใช้ในรวมตัวอักษรเข้าไปในเว็บไซต์

对字体格式的浏览器支持

表格中的数字注明了完全支持该字体格式的首个浏览器版本。

字体格式
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG 不支持 不支持 不支持 3.2 不支持
EOT 6.0 不支持 不支持 不支持 不支持

*IE：该字体格式仅在设置为 "installable" 时有效。

*Firefox：默认情况下不支持，但可以启用（需要将标志设置为 "true" 才能使用 WOFF2）。

使用您需要的字体

在 @font-face 规则中：首先定义字体的名称（例如 myFirstFont），然后指向该字体文件。

提示：字体 URL 始终使用小写字母。大写字母可能会在 IE 中产生意外结果。

如需将字体用于 HTML 元素，请通过 font-family 属性引用字体名称（myFirstFont）：

实例

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}
div {
  font-family: myFirstFont;
}

亲自试一试

使用粗体文本

您必须添加另一条 @font-face 规则，其中包含粗体文本的描述符：

实例

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

亲自试一试

文件 "sansation_bold.woff" 是另一个字体文件，其中包含 Sansation 字体的粗体字符。

每当带有 "myFirstFont" 字体族的一段文本应呈现粗体时，浏览器都会使用它。

这样，您就可以为同一字体设置许多 @font-face 规则。

CSS 字体描述

下表列出了能够在 @font-face 规则内定义的所有字体描述符（font descriptor）：

描述符 值 描述
font-family name 必需。定义字体名称。
src URL 必需。定义字体文件的 URL。
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 เลือกได้ กำหนดวิธีที่จะขยายแบบอักษร ค่าเริ่มต้นคือ "normal"
font-style
  • normal
  • italic
  • oblique
 เลือกได้ กำหนดรูปแบบของแบบอักษร ค่าเริ่มต้นคือ "normal"
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 เลือกได้ กำหนดความหนาของแบบอักษร ค่าเริ่มต้นคือ "normal"
unicode-range unicode-range เลือกได้ กำหนดขอบเขตแบบอักษรUNICODEที่สนับสนุน ค่าเริ่มต้นคือ "U+0-10FFFF"