- 0133技术站
- 联系QQ:18840023
- QQ交流群

- 微信公众号

CSS3 字体
CSS3 @font-face 规则
在 CSS3 之前,在网页中必须使用已在用户计算机上安装好的字体,但是现如今通过 CSS3,我们可以使用喜欢的任意字体。
当找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它会在需要时被自动下载到用户的计算机上。
“自己的”的字体是在 CSS3 @font-face 规则中定义的
浏览器支持:
属性 | 浏览器支持 | ||||
@font-face | | ![]() | ![]() | ![]() | ![]() |
注意:Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则
自定义字体:
在新的 @font-face 规则中,必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。
如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont)
@font-face { font-family: myFirstFont; src: url(Sansation-Italic.ttf) } div { font-family:myFirstFont; }
点击 "运行实例" 按钮查看在线实例
效果图:
CSS3 字体描述符
下面的表格列出了能够在 @font-face 规则中定义的所有字体描述符
描述符 | 值 | 描述 |
font-family | name | 必需。规定字体的名称 |
src | URL | 必需。定义字体文件的 URL |
font-stretch | normal condensedultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | 可选。定义如何拉伸字体。默认是 "normal" |
font-style | orma litalic oblique | 可选。定义字体的样式。默认是 "normal" |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 | 可选。定义如何拉伸字体。默认是 "normal" |
unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF" |
推荐手册