记录一次特殊字体加载的问题

记录一次特殊字体加载的问题

技术杂谈小彩虹2021-07-07 21:56:1060A+A-

前几天在做一个图表项目时,遇到这样一个问题:

这个项目的数字字体要求使用特殊字体,于是在 css 文件中引入了字体并使用,在本地开发时是正常的,部署到服务器,在 Ghrome 浏览器中看起来是正常的,但是在 safari 浏览器中引入的字体却没有生效,是什么原因呢?

现象

表面上看是引入的特殊数字字体在 safari 浏览器没有效果。

排查过程

1. 查看字体是否加载成功

检查 -> network -> font

image.png

发现需要的字体文件是 404

2. 查看字体加载不成功的原因

具体的字体加载的路径是 https://xxx/Lato-Regular.ttf ,据分析这个路径不会有这个文件的,因为字体没有做单独的打包,所以不是浏览器的问题,应该是谷歌浏览器也会有这个问题的,只是谷歌浏览器和Safari 浏览器由于字体没有生效,展示的都是浏览器的默认字体。

3. 尝试使用 base-64 的方式打包字体

修改 webpack 对 .ttf 的打包,没有效果(其实设置了 url-loader 打包就可以了,不需要加其他额外的配置了)

注:url-loader 功能类似于 file-loader , 但是在文件大小(单位为字节)低于指定的限制时,可以返回一个DataURL。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|ttf)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

4. 修改字体的引入路径

经过 wenpack 打包的配置的修改无效后,尝试修改字体的引入路径,发现字体的引入路径出现了问题,需要将原有的绝对路径引入方式修改为相对路径的引入方式,字体才能引入成功。

@font-face
  font-family 'Lato-Regular'
  // src url('/src/font/Lato-Regular.ttf') format('woff')  修改前
  src url('../../font/Lato-Regular.ttf') format('woff') 修改后

修改后:

image.png

最终解决方法

修改字体的引入路径为相对路径。

总结

当我们处理css中的图片、字体等资源文件时,常用的两种loader是 file-loader或者url-loader,两者的主要差异在于,url-loader可以设置图片、字体等文件的大小限制,当文件的大小超过限制时,其表现行为等同于 file-loader,而当文件不超过限制时,则会将文件以base64的形式打包,以减少请求次数。有时会出现因为地址错误导致引用失效情况,可以查看是否是以上的情况。

为什么本地开发引入的字体可以正确的显示,部署到服务器却不生效了呢?

  1. webpack 本地开发中使用的是 webpack-dev-server,实时编译后的文件都保存到了内存当中,引用字体包的时候使用的是绝对路径,因此在本地开发时引入的字体生效;
  2. 使用webpack打包后的 dist 目录,字体包的实际存储路径与 http 请求字体包的路径不一致,所以字体没有生效;

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们