CSS3——@font-face（文字字体包）-CSDN博客

本文介绍了如何使用 CSS 的 @font-face 规则来在网页上应用自定义字体，并提供了跨浏览器兼容性的解决方案。详细解释了不同字体格式的作用及如何针对不同浏览器选择合适的字体格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@font-face

下载外部字体包到本地，处理字体样式

我们来看是怎么用的

1         @font-face{
2             font-family: '自定义';
3             src: url('地址');
4         }
5        div{
6            font-family: '用上面自定义的名字'
7        }

在我们中文的网址中实际用到的不多，因为中文的字体包都很大，所以加载速度会大大减慢。

除非字体包里面不大，用到的东西不多

说明：

设置嵌入HTML文档的字体。

需要兼容当前的主流浏览器，需同时使用TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)四种字体格式。
嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。
.eot(Embedded Open Type)为IE的私有字体格式。Safari3.1开始支持.ttf(TrueType)和.otf(OpenType)。
未来.woff(Web Open Font Format)将会取代.ttf(TrueType)和.otf(OpenType)两种字体格式。
示例：使用一个全浏览器兼容的自定义字体

1         @font-face {
2              font-family: 'diyfont'; 
3              src: url('diyfont.eot'); /* IE9+ */ 
4              src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
5              url('diyfont.woff') format('woff'), /* chrome、firefox */ 
6              url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ 
7              url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */ 
8         }