读书笔记摘抄新闻资讯font-face
font-face是css3中允许使用自定义字型的一个模组。
@ font-face的是一个CSS规则，允许你输入自己的字型出现在网站上，即使在特定的字型在访问者的计算机上没有安装。这条规则最重要的是，它为设计师打开了一个全新的世界。您可以使用任何你喜欢的字型。
font-face是CSS3中的一个模组，他主要是把自己定义的Web字型嵌入到你的网页中
语法规则：
@font-face {
font-family: <FontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
| 字型描述 | 值 | 说明 |
|---|---|---|
font-family | name | 必需的。定义字型的名称。 |
src | URL | 必需的。定义该字型下载的网址（S） |
font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | 可选。定义该字型应该如何被拉长。默认值是"正常" |
font-style | normal italic oblique | 可选。定义该字型应该是怎样样式。默认值是"正常" |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 | 可选。定义字型的粗细。默认值是"正常" |
unicode-range | unicode-range | 可选。定义该字型支持Unicode字元的範围。默认值是"ü+0-10 FFFF" |
如何使用@ font-face
首先，定义新的字型所提供的名称和说明的字型。
@font-face {
font-family: DeliciousRoman;
src: url('http://******/Delicious-Roman.otf');
}
然后你引用它。
p {
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}
就是这样。
在前面的例子中使用外部来源。但是，如果将字型档是在您的伺服器上，那幺你可以参考以下的方式：
@font-face {
font-family: DeliciousRoman;
src: url('…/Delicious-Roman.otf');
}
此外，还有其他三个字型属性，您应该知道的。首先是font-stretch，您可以设定的字型会被拉伸，“normal’”是默认的。此外，有字型的风格，让你的字型是斜或斜体。最后，还有字型的重量，最后字型为粗体，等你可以自己设定
@font-face {
font-family: DeliciousRoman;
src: url('…/Delicious-Roman.otf');
font-stretch: condensed;
font-style: oblique;
font-weight: bold;
}
浏览器的兼容性
并非所有的浏览器都支持@ font-face的！
目前，@ font-face的支持
- Firefox
- Opera
- Chrome
- Safari
- Internet Explorer 9
这是你会说他不支持IE9以下的浏览器吗，不用担心，在旧的浏览器使用@ font-face时，不同的浏览器支持特定的字型档。
- IE：EOT
- Mozilla：OTF，TTF
- Safari：OTF，TTF
- Opera：OTF，TTF
- Chrome：OTF，TTF
建议
字型渲染是一件棘手的事情 - 尤其是老移动浏览器。你应该总是测试，你可以儘可能多的设备支持。发现问题的速度越快越好。
最后，请记住，使用许多不同的字型可能会减慢你的网站需要时间来载入所有这些字型！