看完必恍然大悟的活字格内幕：六十六、设置客户端自行下载显示第三方字体

收藏 · 2022-11-21 16:37 上传

本帖最后由 Erik.Xue 于 2022-11-21 16:40 编辑

字体，是一个很敏感的玩意儿。作者只要不开源，开发人员向来都需要用的小心翼翼，稍有不慎，有就可能引“祸”上身。

所以，活字格中，如果在安装设计器开发的机器上，安装了自己想要使用的字体后，如下图这样安装后：
image.png472944640.png

点击《安装》后，可以在PC——控制面板\外观和个性化\字体中，看到安装完成的字体：
image.png507658690.png

在该机器上打开设计器后，就可以选择使用安装的字体：
image.png310220641.png

我们正常F5运行测试，字体显示都是没有问题的。

But，如果将该工程发布后，你会发现，自己在页面用的字体不显示了。

那么，这个原因在于，字体本身涉及到版权问题，活字格不提供字体发布到服务器上的功能，并且如果访问网页的客户端需要显示所用的字体，活字格也不提供自动下载字体。

那么为了方便各位的最终用户的使用，我们不太可能会要求每一个访问应用的客户端机器都提前安装好网页中所用到的字体，所以，这里给大家介绍一种方式，可以在客户端机器没有安装所使用字体的前提下，自动下载字体进行展示。

Step 1：
首先，确认安装活字格设计器的机器上安装了所需要使用的字体，然后在设计器中使用了该字体，本地测试运行后，F12打卡浏览器控制台——Elements（元素），选中所使用对应字体的div，找到font-family的值：

image.png955859680.png

记住该值，比如我使用的是YouSheBiaoTiHei，一定要记住此值！！！用了几个字体就用同样的方式，记住对应的font-family的值。

Step 2：
在设计器中引入一个CSS文件：
image.png834587097.png

然后在CSS文件中添加以下语句，比如我引入的三种字体：

@font-face {
font-family: 'A019-Sounso Quality';
src: url(http://发布的地址/test-font/Upload/Sounso-Quality-2.ttf) format('truetype');
}
@font-face {
font-family: YouSheBiaoTiHei;
src: url(http://发布的地址/test-font/Upload/YouSheBiaoTiHei-2.ttf) format('truetype');
}
@font-face {
font-family: 'Smiley Sans Oblique';
src: url(http://发布的地址/test-font/Upload/SmileySans-Oblique.ttf) format('truetype');
}

复制代码

Step 3：
填写好之后，来到要发布的服务器上。

找到ForguncyServer文件夹下对应的应用名下Upload文件夹下，将用到的字体文件都放到这个文件夹下：
image.png949545288.png

当然，这个地址和上面CSS代码中的url参数对应，http://发布的地址/test-font/Upload/Sounso-Quality-2.ttf，保证客户的可以取到对应的字体文件。

Step 4：
发布工程，打开开发者工具，可以在网络面板中看到对应的字体已经下载了。
image.png14894408.png

这样一来，我们就不需要在访问网站的客户端上安装所使用的字体了，是不是方便了很多！？

附加知识

关于字体文件的格式这里给大家科普一点：

TTF 的兼容性更好，但是其字体文件体积相对最大。
WOFF 字体比 TTF 字体有更小的体积和更好的表现性。
OTF 也是一种轮廓字体，比TrueType 更为强大，并且还支持多个平台，支持很大的字符集，还有版权保护。可以说它是Type 1和 TrueType 的超集。

最后需要注意的点

字体文件相比来说都比较大，且算很占带宽的资源文件，所以如果要使用此方式：

1、强烈建议使用CDN配置字体文件！！！
2、使用文件体积较小的字体文件！！！

最后，推荐一个刚刚开源的字体，需要自取：Smiley Sans - atelierAnchor (atelier-anchor.com)

Nancy.Yin · Nancy.Yin

厉害

		自动登录	找回密码
密码			立即注册

[功能内幕] 看完必恍然大悟的活字格内幕：六十六、设置客户端自行下载显示第三方字体

1 个回复

Wyn高级认证

Wyn认证

讲师达人

悬赏达人

元老葡萄

活字格认证

活字格高级认证

微信认证勋章