CSS3 字体描述符
描述符 | 值 | 描述 |
---|---|---|
font-family | name | 必需。规定字体的名称。 |
src | URL | 必需。定义字体文件的 URL。 |
font-stretch |
| 可选。定义如何拉伸字体。默认是 "normal"。 |
font-style |
| 可选。定义字体的样式。默认是 "normal"。 |
font-weight |
| 可选。定义字体的粗细。默认是 "normal"。 |
unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。 |
兼容
浏览器支持
- Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字体 (Embedded OpenType)。
- Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
注释:Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
如何使用 @font-face
一、定义你的字体:
1. font-family: 自定义字体的名字
2. src: url(...) 在网上下载想要的字体到本地,输入文件地址;也可以使用网络地址 (字体文件格式有多种,例如 woff,ttf, svg)
@font-face{
font-family: '字体名称随便起';
src: url('../font/字体名称.eot');
src:url('../font/字体名称.woff') format('woff'),
url('../font/字体名称.ttf') format('truetype'),
url('../font/字体名称.svg') format('svg');
}
二、把字体样式应用到元素上
div{font-family:"lingfont"}
CSS文件:
知识点:
同一个自定义字体样式中,不同情况(例如粗体)可以设置不同的字体。例子中,用 @font-face 设置了2个自定义样式 "lingfont",其中一个用于普通格式的元素;另一个添加了样式 font-weight:bold,设置了有粗体格式的文字显示另一个种自定义文字。
@font-face{ font-family: "lingfont"; src:url("../font/Arual.ttf"); } /*非粗体文字使用 Arual 字体*/ @font-face{ font-family: "lingfont"; src:url("../font/Caratterre ROB.ttf"); font-weight: bold; /*粗体的文字会使用 Caratterre 字体*/ } div{font-family:"lingfont"}
html文件:
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/cc.css" type="text/css" /> <body> <div>第一句:使用font-face 成功使用了下载的文字样式feaefef。<b>其中,这一句是jiacujiacu加粗体文字bbbbb</b>其余是不加粗字体</div> <div>第二句errere<span style="font-weight: bold">这里加了加jiacujiacu粗体样式</span>其余是不加粗字体</div> </body> </html>
显示效果:
知识点:带<b></b>标签和 style="font-weight: bold" 样式的部分都被认为是加粗部分,