引用自定义字体样式

• 目录结构

  • 将字体文件放在 src/assets/fonts 文件夹中。

  • 定义一个fonts.scss文件在src/style文件夹中。这个fonts.scss文件用于使用字体文件定义自定义字体。

• 利用字体文件定义自定义字体的方法

  • 使用@font-face

    @font-face{
      font-family: 'XXX';
      src: url('...');
    }
    

    上面的就是文件fonts.scss中的内容。

    font-family，用于定义自定义字体的名称。

    src，用于指定对应的字体文件路径，推荐使用绝对路径，可以使用打包工具配置文件中定义的alias来适配不同设备绝对路径的问题。

• 使用自定义字体的方法

  • 在需要使用自定义字体的scss文件中，import fonts.scss文件。

    @import '@/style/fonts.scss';
    .a{
      font-family: 'XXX';
    }
    

• 检查是否浏览器中加载字体文件的方法

  1. 首先可以选取到使用了自定义字体的元素

  2. 打开这个元素的样式，查看是否是使用的自定义字体。

     

  3. 可以取消勾选这个font-family属性，看字体是否变化。

  4. 可以查看计算样式。

     

  5. 可以查看网络请求中是否有这个字体资源（可以筛选字体，方便查看是否加载字体资源）

     

• 常见误解

  • 彩色的特效字体，实际上不能只靠字体文件实现，还使用了css来实现彩色。（字体文件只能影响字体，而不能影响颜色）。