浅谈web(vue)项目引入第三方字体的方法(@font-face)及优化

ZhangHaoran
3,940 阅读3分钟

最近，我司在官网项目中，为广告效果在每个页面顶部需要加是艺术字的广告语。

艺术字体名称为：苏新诗柳楷简

这么漂亮的字体，一般在个人使用的电脑上是没有的，需要在渲染页面的时候同时引入字体文件。

查了资料后，css3后新增了@font-face属性，可以自定义字体。

下面进入实操

项目实操

  • 首先下载字体文件（.ttf格式）
  • 为兼容各浏览器和服务端效果渲染，需要将.ttf文件转化下: (非必选)

字体转化工具链接：onlinefontconverter.com/

  • 将转化后字体文件放入路径：* ~/assets/font/ 目录下* （未转化其它格式的话直接把.ttf文件放进来）
  • 在css中自定义字体并引入字体文件, 文件路径： ~/assets/css/rest.css
@font-face {
  font-family: '苏新诗柳楷简';    // 自定义字体名称
  src: url('../../../fonts/SXSLKJ.svg#SXSLKJ') format('svg'),   // 自定义字体文件路径
  url('../../../fonts/SXSLKJ.ttf') format('truetype'),
  url('../../../fonts/SXSLKJ.woff') format('woff');
}
  • 在html中使用
<html>
<head>
    <meta charset="UTF-8">
    <title>font</title>
    <link rel="stylesheet" href="assets/css/rest.css">
    <style>
          p{
              font-family: '苏新诗柳楷简';
              font-size: 18px;
          }
    </style>
</head>
<body>
<p>不会修电脑的小张同学</p>
</body>
</html>
  • 展示效果
    展示效果
    展示效果

讲道理说，此时我们已经完成了需求，但做为是艺术家而非程序员的小张同学，肯定会考虑下性能问题了；

我们看下目前加载页面时字体文件的响应速度及大小：

此时，我们在本地开发环境下看到文件大小为5.7mb,加载时间为：17ms，我们感觉这加载速度也蛮快的， 不需要优化了； 同一个想法的我在上线后傻了眼， 字体文件加载速度变成了超长时间，所展示的字体先是以当前系统字体展示，等字体文件加载后才会以引入的字体效果展示；

解决加载速度问题：

查阅资料后：可以使用 font-spider这个库

font-spider的工作原理是这样的： 中文字体文件之所以很大，是因为英语只有26个字母，而中文的汉字有好多好多个，所以文件相对来说就会大很多。font-spider就是从你的css文件的@font-face入手，去查找字体，然后遍历你的html文件，通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。

步骤：

  • 安装 font-spider 库
npm install font-spider -g
  • 在 @font-face 中一定要有.ttf文件指向。
  • 运行 font-spider 命令。
// 切换到项目根目录 
cd /home/pro/
// 执行命令，*.html是对所有html文件执行该命令，你也可以写具体name的html
// vue项目没有html文件，需要自己手写一个所需要字体的html
font-spider  *.html
  • 执行完毕命令， 字体文件下会出现.font-spider文件夹。文件夹下的.ttf为你的原始文件。

本笔记初发(个人笔记)： www.manbanzhen.top/detail/10

有没有说明白的地方，请联系我

联系邮箱： manbanzhen@qq.com

avatar
文章
阅读
粉丝