css中自定义字体的使用以及注意事项

最新推荐文章于 2025-06-12 17:12:13 发布

原创最新推荐文章于 2025-06-12 17:12:13 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了CSS中自定义字体的定义与使用方法，包括@font-face规则的应用、不同浏览器的支持情况及字体文件格式的选择。此外，还分享了在实际项目中遇到的问题及解决方案。

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

css中自定义字体的使用以及注意事项

之前看到过很多自定义字体的样式的写法，但是从来没有自己去写过，这次因为项目需求接触到了自定义字体，就进行了简单的了解，初看觉得及其简单，网上的注意事项炒鸡多，原以为万无一失，结果还是入坑不断，所以准备和小伙伴们分享一下自己入的坑以及解决方法。

1、如何定义自定义字体？

@font-face {
  font-family: '自定义字体名称';
  src: url('字体文件名.eot'); /* IE9 Compat Modes */
  src: url('字体文件名.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('字体文件名.woff') format('woff'), /* Modern Browsers */
       url('字体文件名.ttf') format('truetype'), /* Safari, Android, iOS */
       url('字体文件名.svg#字体文件名') format('svg'); /* Legacy iOS */
  font-style: normal;
  font-weight: normal;
}

上述代码自定义了一个字体，字体名为“自定义字体名称”，并且每个url的作用已经在注释中进行了标注，当在相应的场合下，会加载相应的字体文件。

注意： IE9 下和 IE6-IE8 的加载 url 是不一样的，一定要分开写，不然你定义的字体将无法加载。

扩展：
想给已定义的自定义字体设置不同的font-weight，应该如何设置呢？
方法：再定义一个相同的字体文件，改变字体文件和font-weight的值就可以使用了，看以下代码片段，就可以理解了。

@font-face {
  font-family: '自定义字体名称';
  src: url('字体文件名-bold.eot'); /* IE9 Compat Modes */
  src: url('字体文件名-bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('字体文件名-bold.woff') format('woff'), /* Modern Browsers */
       url('字体文件名-bold.ttf') format('truetype'), /* Safari, Android, iOS */
       url('字体文件名-bold.svg#字体文件名') format('svg'); /* Legacy iOS */
  font-style: normal;
  font-weight: bold;
}

2、如何使用？

body{
  font-family:  "自定义字体名称";
}

给相应的标签（例如p、span、div、a…）指定font-family，就可以使用你的自定义字体啦！
如果自定义了多种font-weight值的字体，只要使用的时候加上font-weight的值就OK了哟（看下面的代码）！

body{
  font-family:  "自定义字体名称";
  font-weight: bold;/* 值为自定义的font-weight的值 */
}

3、容易踩进的坑！

number1：

一个文件夹里面只允许有一种自定义字体的文件，如果有第二种自定义字体的文件，则第二种字体不加载！

这里写图片描述

这个文件夹里面有两种自定义的字体，第二种字体就没有被加载出来。

number2：
如果自定义字体为中文字体，并且发现在加载的时候英文字体乱码并且错乱，则应在font-family中把英文字体也加上，并且放在中文的自定义字体之前，就可以解决这个问题了。

font-family:  Verdana, Arial,"自定义字体名称";

希望总结的这几点对小伙伴们有用！