当前位置：首页 > news >正文

@font-face用法超详细讲解

news 2025/12/12 9:00:18

文章目录

font-face是什么
@font-face基本语法
- url
- - TTF
  - OTF
  - EOT
  - WOFF
  - SVG
- format
@font-face用法示例
font字体下载
ttf-to-eot 字体转换器

https://blog.csdn.net/qq_37417446/article/details/106728725
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face

font-face是什么

font-face是css3中允许使用自定义字体的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中。
这是一个叫做@font-face 的CSS @规则 ，它允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式，@font-face 可以消除对用户电脑客户端的字体的依赖。

@font-face基本语法

@font-face {font-family: <font-name>;src: local( <family-name> ) | <url> [format("formatName")][,<url> [format("formatName")]]*;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>;font-display: <font-display>;
}

@font-face {font-family: 'HYYaKuHei-85J';url('./fonts/HYYaKuHei-85J.ttf') format('truetype');
}.box2 {font-family: 'HYYaKuHei-85J';
}

url

表示服务器端提供的字体地址，这个也是可以使用多个，多个之间用逗号隔开，一般写多个是为了浏览器兼容加载不同格式的字体。目前web可以加载六种格式的字体：

字体格式有太多选择，不幸的是始终没有一个能在所有的浏览器上通用。这意味着，你必须使用多种字体的方案来保持用户跨平台的一致性体验。本文内容如题，会依次介绍一下 TTF、OTF、WOFF、EOT 和 SVG 几种字体目前在 Web 上的情况。

在这里插入图片描述

TTF

TTF (TrueType Font) 字体格式是由苹果和微软为 PostScript 而开发的字体格式。在 Mac 和 Windows 操作系统上，TTF 一直是最常见的格式，所有主流浏览器都支持它。然而，IE8 不支持 TTF；且 IE9 上只有被设置成 “installable” 才能支持（译注：别想了，转别的格式吧）。

TTF 允许嵌入最基本的数字版权管理标志————内置标志可以告诉我们字体作者是否允许改字体在 PDF 或者网站等处使用，所以可能会有版权问题。另一个缺点是，TTF 和 OTF 字体是没压缩的，因此他们文件更大。

OTF

OTF (OpenType Font) 由 TTF 演化而来，是 Adobe 和微软共同努力的结果。OTF 字体包含一部分屏幕和打印机字体数据。OTF 有几个独家功能，包括支持多平台和扩展字符集。OTF 字体可以在 Macintosh 和 Windows 系统上使用。

OTF 也允许多达 65000 个字符的存储。这个额外的空间让设计师可以自由地添加附加元素，比如小帽子、老式数字体、代替的字符和其他一些以前必须作为独立字体分发的附加材料。

（译注：苹果当年为了对抗 Adobe 在 PostScript 的 Type 1 字体拉上了微软一起撸了 TTF，结果后来微软又反水跟 Adobe 搞一套 OTF，还让 IE 后面的版本取消 TTF 支持，IT圈子还真是乱。。）

EOT

EOT (Embedded Open Type) 字体是微软设计用来在 Web 上使用的字体。是一个在网页上试图绕过 TTF 和 OTF 版权的方案。你可以使用微软的工具从现有的 TTF/OTF 字体转成 EOT 字体使用，其中对字体进行压缩和裁剪使得文件体积更小。同时为了避免一些收版权保护的字体被随意复制，EOT 还集成了一些特性来阻止复制行为，以及对字体文件进行加密保护。听起来很有前途？嗯哼，可惜 EOT 格式只有 IE 支持。

（译注：微软曾经弄死网景的恶意竞争引起了公愤，在 IE 上推行孤立主义的微软遭到整个行业的唾弃）

WOFF

WOFF (Web Open Font Format) 本质上是 metadata + 基于 SFNT 的字体（如 TTF、OTF 或其他开放字体格式）。该格式完全是为了 Web 而创建，由 Mozilla 基金会、微软和 Opera 软件公司合作推出。 WOFF 字体均经过 WOFF 的编码工具压缩，文件大小一般比 TTF 小 40%，加载速度更快，可以更好的嵌入网页中。metadata 允许在字体文件中包含许可数据，以解决版权问题。这是万维网联盟提（qing）倡（ding）的，所以毫无疑问的是字体格式的未来。目前主流的浏览器的新版本几乎都支持 WOFF。

WOFF2 是 WOFF 的下一代。 WOFF2 格式在原有的基础上提升了 30% 的压缩率。由于它还没有 WOFF 的广泛支持，所以还只是一个可展望的升级。

SVG

SVG (Scalable Vector Graphics font) 字体格式使用 SVG 的字体元素定义。这些字体包含作为标准 SVG 元素和属性的字形轮廓，就像它们是 SVG 映像中的单个矢量对象一样。SVG 字体最大的缺点是缺少字体提示（font-hinting）。字体提示是渲染小字体时为了质量和清晰度额外嵌入的信息。同时，SVG 对文本（body text）支持并不是特别好。因为 SVG 的文本选择（text selection）目前在 Safari、Safari Mobile 和 Chrome 的一些版本上完全崩坏，所以你不能选择单个字符、单词或任何自定义选项，你只能选择整行或段落文本。

然而，如果你的目标是 iPhone 和 iPad 用户，需要说 SVG 字体是 iOS 上 Safari 4.1 以下唯一允许的字体格式。

format

可选值，表示给加载的外部字体指定字体格式，用来告诉浏览器让浏览器能够识别所使用的字体格式，可用的类型有 embedded-opentype, truetype, opentype, woff, woff2, svg。分别对应上边我们介绍的字体格式。

@font-face用法示例

/* 加载一种字体格式 */
@font-face{font-family: "myFontName";src:  url('font.woff') format('woff');
}/* 加载多个字体格式，兼容更多浏览器 */
@font-face{font-family: "myFontName";src: url('font.eot'); /* IE9*/src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('font.woff2') format('woff2'),url('font.woff') format('woff'), /* chrome、firefox */url('font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('font.svg#Alibaba-PuHuiTi-Regular') format('svg'); /* iOS 4.1- */
}

font字体下载

https://www.wfonts.com/font/simsun
在这里插入图片描述

ttf-to-eot 字体转换器

https://cloudconvert.com/ttf-to-eot
在这里插入图片描述

参考网站
https://webplatform.github.io/docs/tutorials/typography/font-face/
https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face/font-display
https://www.zhangxinxu.com/wordpress/2016/11/css-unicode-range-character-font-face/
https://www.w3cplus.com/css/font-display-masses.html
字体下载格式转换网站
https://www.fontke.com/tool/fontface/
http://www.fonts.net.cn/
https://fonts.google.com/
字体压缩工具
http://www.fonts.net.cn/ 字体天下
http://www.ziticq.com/ 字体传奇
https://www.hellofont.cn/ 字由
http://fontstore.baidu.com/static/editor/index.html 百度在线字体编辑器
https://efe.baidu.com/ 百度字体处理
https://www.fontsquirrel.com/tools/webfont-generator 字体格式换
https://www.fontke.com/tool/fontface/ 字体转换