CSS Web font

CSS @font-face

Web font ອາດນຳໃຊ້ມາດຕະຖານທີ່ບໍ່ມີການຕິດຕັ້ງໃນຄອມພິວເຕິຂອງຜູ້ນຳໃຊ້.

ບໍ່ຈື່ງບໍ່ມີການຊອກຫາ/ຊື້ມາດຕະຖານທີ່ທ່ານຕ້ອງນຳໃຊ້, ທ່ານພຽງແຕ່ຈະນຳໃຊ້ເອກະສານມາດຕະຖານທີ່ຕິດອອກໃນເຊີ່ວຍບໍລິຫານທາງອິນເຕີເນັດຂອງເຈົ້າ, ແລະຈະຖືກດາວໂດຍຜູ້ບໍລິຫານໃນຕອນທີ່ຕ້ອງການ.

ມາດຕະຖານທີ່ຂອງເຈົ້າທີ່ພົບພາຍໃນ CSS @font-face ໃນການກໍານົດກົດລະບຽບ

ຮູບແບບມາດຕະຖານທີ່ຫຼາຍທີ່ສຸດ

TrueType ມາດຕະຖານ (TTF)

TrueType ແມ່ນສະເໜີຈາກ Apple ແລະ Microsoft ໃນທ້າຍປີ 1980. TrueType ແມ່ນຮູບແບບທີ່ມີຄວາມຫຼາຍກວ່າຮູບແບບໃນ 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.

ຖານ OpenType (EOT)

EOT 字体是 Microsoft 设计的 OpenType 字体的紧凑形式，用作网页上的嵌入式字体。

对字体格式的浏览器支持

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

字体格式
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
 Optional. Defines how the font should be stretched. The default value is "normal".
font-style
  • normal
  • italic
  • oblique
 Optional. Defines the style of the font. The default value is "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Optional. Defines the weight of the font. The default value is "normal".
unicode-range unicode-range Optional. Defines the range of UNICODE characters supported by the font. The default value is "U+0-10FFFF".