admin管理员组文章数量:1594754
@font-face
@font-face CSS at-rule 指定一个用于显示文本的自定义字体;字体能从远程服务器或者用户本地安装的字体加载. 如果提供了local()函数,从用户本地查找指定的字体名称,并且找到了一个匹配项, 本地字体就会被使用. 否则, 字体就会使用url()函数下载的资源。
通过允许作者提供他们自己的字体,@font-face 让设计内容成为了一种可能,同时并不会被所谓的"网络-安全"字体所限制(字体如此普遍以至于它们能被广泛的使用). 指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体,同时在不依赖网络情况下实现此功能。
在同时使用url()和local()功能时,为了用户已经安装的字体副本在需要使用时被使用,如果在用户本地没有找到字体副本就会去使用户下载的副本查找字体。
@font-face 规则不仅仅使用在CSS的顶层,还可以用在任何CSS条件组规则中.
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}
Copy to Clipboard
概述
这是一个叫做@font-face
的CSS @规则 ,它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式,@font-face
可以消除对用户电脑字体的依赖。 @font-face
不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组 中。
语法
@font-face { [ font-family: <family-name>; ] || [ src: <src>; ] || [ unicode-range: <unicode-range>; ] || [ font-variant: <font-variant>; ] || [ font-feature-settings: <font-feature-settings>; ] || [ font-variation-settings: <font-variation-settings>; ] || [ font-stretch: <font-stretch>; ] || [ font-weight: <font-weight>; ] || [ font-style: <font-style>; ] || [ size-adjust: <size-adjust>; ] || [ ascent-override: <ascent-override>; ] || [ descent-override: <descent-override>; ] || [ line-gap-override: <line-gap-override>; ] }
where<family-name> = <string> | <custom-ident>+
取值
font-family
所指定的字体名字将会被用于font或font-family属性( i.e. font-family: <family-name>; )
src
远程字体文件位置的URL或者用户计算机上的字体名称, 可以使用local语法通过名称指定用户的本地计算机上的字体( i.e. src: local('Arial'); )。 如果找不到该字体,将会尝试其他来源,直到找到它。
font-variant (en-US)
A font-variant value.
font-stretch (en-US)
A font-stretch value.
font-weight (en-US)
A font-weight value.
font-style
对于src所指字体的描述。如果所需字体符合描述,则采用本font-face所定义的字体。
unicode-range (en-US)
在该@font-face中定义的unicode字体范围
示例
下面的例子简单定义了一个可下载的字体,并应用到了文档的整个body标签上。
<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
@font-face {
font-family: "Unifont";
src: url("unifont-14.0.01.ttf");
}
body { font-family: "Unifont", serif }
</style>
</head>
<body>
<h1>
GNU Unifont 是 GNU 项目的一部分。 此页面包含最新版本的 GNU Unifont,以及 Unicode 基本多语言平面 (BMP) 中每个可打印代码点的字形。 BMP 占用 Unicode 空间的前 65,536 个代码点,表示为 U+0000..U+FFFF。补充多语言平面 (SMP) 的覆盖范围也在不断扩大,范围为 U+010000..U+01FFFF,以及 Michael Everson 的 ConScript Unicode Registry (CSUR) 和 Rebecca Bettencourt 的 Under-CSUR 补充。</h1>
</html>
在接下来的例子中,用到了用户本地字体"Helvetica Neue Bold"的备份;如果当前用户(浏览器)未安装该字体(两种可能的字体名都已经试过),就会用下载的字体"MgOpenModernaBold.ttf"来代替:
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
Copy to Clipboard
接下来的例子在英文原文中已被删除。
这个例子新定义了一个字体,正常粗细的字采用字体Times New Roman,粗体字采用Consolas。
@font-face {
font-family: myFirstFont;
src: local("Times New Roman");
font-weight:normal;
}
@font-face {
font-family: myFirstFont;
src: local(Consolas);
font-weight:bold;
}
Copy to Clipboard
注意
- 这里使用的Web fonts 仍然受到同域限制 (字体文件必须和调用它的网页同一域), 但可以使用 HTTP access controls 解除这一限制。
- 因为这里没有为 TrueType(ttf), OpenType(otf) 和 Web Open File Format(WOFF) 字体定义MIME,因此不能为这些字体类型设置特定的MIME(实际上WOFF的MIME将会是application/font-woff,但浏览器对此MIME的识别还不统一,其它字体情况也类似,可暂时使用application/octet-stream)。
- 你不能在一个 CSS 选择器中定义 @font-face 。例如,这样写是无效的:
Copy to Clipboard.className { @font-face { font-family: MyHelvetica; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); font-weight: bold; } }
规范
Specification | Status | Comment |
---|---|---|
WOFF File Format 2.0WOFF2 font format | Recommendation | Font format specification with new compression algorithm |
WOFF File Format 1.0WOFF font format | Recommendation | Font format specification |
CSS Fonts Module Level 3@font-face | Recommendation | Initial definition |
浏览器兼容性
Report problems with this compatibility data on GitHub
desktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on iOS | Samsung Internet | |
| Full support1 | Full support12 | Full support3.5 | Full support4 | Full support10 | Full support3.1 | Full support37 | Full support18 | Full support4 | Full support10.1 | Full support2 | Full support1.0 |
SVG fonts DeprecatedNon-standard | No support1 – 38 | No supportNo | No supportNo | No supportNo | No support15 – 25 | Full support3.1 | No support37 – 38 | No support18 – 38 | No supportNo | No support14 – 25 | Full support3 | No support1.0 – 3.0 |
WOFF | Full support6 | Full support12 | Full support3.5 | Full support9 | Full support11.1 | Full support5.1 | Full support4.4 | Full support18 | Full support4 | Full support11.1 | Full support5 | Full support1.0 |
WOFF 2 | Full support36 | Full support14 | Full support39 | No supportNo | Full support23 | Full support10 footnote Open | Full support37 | Full support36 | Full support39 | Full support24 | Full support10 | Full support3.0 |
ascent-override | Full support87 | Full support87 | Full support89 | No supportNo | Full support73 | No supportNo | Full support87 | Full support87 | Full support89 | Full support62 | No supportNo | Full support14.0 |
descent-override | Full support87 | Full support87 | Full support89 | No supportNo | Full support73 | No supportNo | Full support87 | Full support87 | Full support89 | Full support62 | No supportNo | Full support14.0 |
font-display | Full support72 | Full support79 | Full support58 | No supportNo | Full support60 | Full support11.1 | Full support72 | Full support72 | Full support58 | Full support51 | Full support11.3 | Full support11.0 |
font-family | Full support4 | Full support12 | Full support3.5 | Full support6 | Full support10 | Full support3.1 | Full support2.2 | Full support18 | Full support4 | Full support10.1 | Full support2 | Full support1.0 |
| No supportNo | No supportNo | Full support34 footnote Open | No supportNo | No supportNo | No supportNo | No supportNo | No supportNo | Full support34 footnote Open | No supportNo | No supportNo | No supportNo |
font-stretch | Full support62 | Full support17 | Full support62 | No supportNo | Full support49 | Full support10.1 | Full support62 | Full support62 | Full support62 | Full support41 | Full support10.3 | Full support6.0 |
font-style | Full support4 | Full support12 | Full support3.5 | Full support4 | Full support10 | Full support3.1 | Full support37 | Full support18 | Full support4 | Full support10.1 | Full support2 | Full support1.0 |
font-variant | Full support4 | Full support12 | Full support3.5 | Full support4 | Full support10 | Full support3.1 | Full support37 | Full support18 | Full support4 | Full support10.1 | Full support2 | Full support1.0 |
font-variation-settings | Full support62 | Full support79 | Full support62 | No supportNo | Full support49 | No supportNo | Full support62 | Full support62 | Full support62 | Full support46 | No supportNo | Full support8.0 |
font-weight | Full support4 | Full support12 | Full support3.5 | Full support4 | Full support10 | Full support3.1 | Full support37 | Full support18 | Full support4 | Full support10.1 | Full support2 | Full support1.0 |
line-gap-override | Full support87 | Full support87 | Full support89 | No supportNo | Full support73 | No supportNo | Full support87 | Full support87 | Full support89 | Full support62 | No supportNo | Full support14.0 |
size-adjust | Full support92 | Full support92 | Full support92Open | No supportNo | Full support78 | No supportNo | Full support92 | Full support92 | Full support92 | No supportNo | No supportNo | Full support16.0 |
src | Full support4 | Full support12 | Full support3.5 | Full support6 | Full support10 | Full support3.1 | Full support2.2 | Full support18 | Full support4 | Full support10.1 | Full support2 | Full support1.0 |
Support for | No supportNo | No supportNo | No supportNo | No supportNo | No supportNo | Full support4 | No supportNo | No supportNo | No supportNo | No supportNo | Full support5 | No supportNo |
unicode-range | Full support1 | Full support12 | Full support36 | Full support9 | Full support15 | Full support3.1 | Full support37 | Full support18 | Full support36 | Full support14 | Full support3 | Full support1.0 |
Legend
Full support
Full support
No support
No support
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
参考
- About WOFF
- FontSquirrel @font-face generator
- Beautiful fonts with @font-face
- Open Font Library
- Microsoft Developer Network (MSDN) @font-face reference
- When can I use WOFF?
- When can I use SVG Fonts?
版权声明:本文标题:HTML页面引入字体@font-face CSS指定字体从远程服务器下载 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1728200572a1149323.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论