VUE自定义个别字体

由于公司业务的原因，有些页面上强制需要某些字体（PS：系统的字体也确实丑）。由于导入整个字体ttf文件实在庞大，一般都是在3-4M。而项目中只用到个别的特殊文字，完全不需要引入整个字体文件。因此就延伸出了这篇文章，记录下如何自定义某些字体的过程。

获取源字体

项目中用的是汉仪书宋二简字体，从某些网站上扒了ttf格式文件字体下来。正常网上下载下来的中文字体命名都是中文命名。如下图是汉仪书宋二简.ttf文件

从网上下载下来的文件

实际使用中却遇到一个坑，就是decode失败。根据网上下载的ttf文件，本人命名为HYSSEJ.ttf。于是扒了很多文章，最终在Stack Overflow上找到了decode失败的原因
大致意思是源字体文件已经收到了污染。

Failed to decode downloaded font: http://0.0.0.0:8080/static/HYSSEJ.ttf
OTS parsing error: cmap: Failed to parse table

decode失败警告

那只能在重新生成源ttf文件，找了一个网站感觉还算不错，该网站上下载下来的源文件命名不是中文的命名。字体下载网页

生成自己所需要的字体

创建一个目录，将源字体文件导入进来。整体结构目录如下。有个隐藏的.font-spider文件夹不用管它，它是运行后自己备份了源文件的ttf。

目录结构
在目录底下创建一个demo.html文件，将项目中用到的字体都写到body里面。demo.html的代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*声明 WebFont*/
        @font-face {
            font-family: 'pinghei';
            src: url('./5cac63e38203f.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
        /*使用选择器指定字体*/
        * {
            font-family: 'pinghei';
        }
    </style>
</head>

<body>

    <!-- 添加自己项目中用到的字体 -->
    <div>请输入您的姓名请输入您的手机请输入验证码请选择时间段发送验证</div>
   <div>个人信息收集声明</div>
</body>

</html>

安装font-spider全局组件到本地。按照官网的步骤，先安装全局的font-spider。本人使用的是sudo cnpm install font-spider -g来安装快一点。这步相信用会用vue的人都懂得安装。不细说了~
执行字体压缩命令，将demo.html中有用到的文字抽成一个新的字体文件。命令如下font-spider demo.html可以看到本来4201KB的压到了59KB

RadishdeMacBook-Pro:font Radish$ font-spider demo.html 
Font family: pinghei
Original size: 4207.916 KB
Include chars: '()*-./0123456789:;@DFWabcefghilmnoprstuwy{}上下与世东个之了二人以体使保信入出则到前功动卫即参及发取古可同
名启器地圳场址城声大天太奥姓字存守安定州已市并广店开当息您意愿成手择指按收旅日时明月本机条格次款段沙洋活海消深用百的盛码
确示立粉约细经维耀茂西规解认证请读赛输远迪送选遵郑都里长间阅雅集预验，
Chars length: 170
Font id: a62f35efe4a87f695ab35be0362fe40d
CSS selectors: *
Font files:
File 5cac63e38203f.ttf created: 59.308 KB

使用自定义字体

将字体文件导入到项目中，并且在APP.VUE中使用它，设置body的font-family为自定义字体。再刷新下页面，就可以看到自定义字体已经生效。

<style lang="scss">
    @font-face {
        font-family: HYSSEJ;
        src: url('/static/5cac63e38203f.ttf');
        font-weight: normal;
        font-style: normal;
    }
    #app{
        width: 100%;
        height: 100%;
    }
    body, html{
        font-family: HYSSEJ !important;
    }
</style>

最终效果页面

拓展

使用画布也可以用自定义的字体。

            const canvas = document.createElement('canvas');
      
            canvas.width = width;
            canvas.height = height;
            // 背景图
            const ctx = canvas.getContext('2d');
            ctx.fillStyle = 'white';
            ctx.fillRect(0, 0, width, height);

            // 标题
            ctx.font = '200 50px HYSSEJ';
            ctx.fillStyle = '#f88fa9';
            ctx.textAlign = 'center';
            ctx.fillText('您已成功预约' , width / 2, 100);

字体合并网站

最后编辑于：2021.01.23 21:40:11