CSS Web字体
-
CSS @font-face规则
Web字体允许Web设计人员使用未安装在用户计算机上的字体。当您找到/购买了您想要使用的字体时,只需在您的网络服务器上包含该字体文件,它将在需要时自动下载给用户。您的“自己的”字体在CSS @font-face规则中定义。 -
不同的字体格式
TrueType字体(TTF) TrueType是Apple和Microsoft在20世纪80年代后期开发的字体标准。TrueType是Mac OS和Microsoft Windows操作系统最常用的字体格式。 OpenType字体(OTF) OpenType是可伸缩计算机字体的格式。它基于TrueType构建,是Microsoft的注册商标。OpenType字体现在通常用于主要的计算机平台上。 Web开放字体格式(WOFF) WOFF是用于网页的字体格式。它是在2009年开发的,现在是W3C推荐标准。WOFF本质上是具有压缩和附加元数据的OpenType或TrueType。目标是通过带宽限制的网络支持从服务器到客户端的字体分发。 Web开放字体格式(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字体的紧凑形式,用作网页上的嵌入字体。 -
浏览器支持字体格式
字体格式 Internet Explorer Chrome FireFox Safari Opera 格式后缀 TTF/OTF 9.0(含)以上 4.0(含)以上 3.5(含)以上 3.1(含)以上 10.0(含)以上 WOFF 9.0(含)以上 5.0(含)以上 3.6(含)以上 5.1(含)以上 11.1(含)以上 WOFF2 不支持 36.0(含)以上 35.0(含)以上 不支持 26.0(含)以上 SVG 不支持 4.0(含)以上 不支持 3.2(含)以上 9.0(含)以上 EOT 6.0(含)以上 不支持 不支持 不支持 不支持 -
使用你想要的字体
在@font-face规则中; 首先定义字体的名称(例如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; }
-
CSS字体描述符
下表列出了可在@font-face规则中定义的所有字体描述符:属性 值 描述 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” -
相关页面
HTML教程:HTML样式