zhanghaoran
文章 文章详情

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

阅读:34 分类:nuxt.js 发布时间:19小时前

最近,我司在官网项目中,为广告效果在每个页面顶部需要加是艺术字的广告语。 艺术字体名称为:苏新诗柳楷简

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

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

下面进入实操

项目实操

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

字体转化工具链接:https://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