纯JS实现网页中自定义字体

通过第三方封装JS脚本 typeface.js ,可以在网页中嵌入特殊字体,从而不必把文字转成图片了。
使用方法:
首先,向设计师索要操作系统中不存在的字体,而设计稿中又出现的字体。
接着,去 typeface.js 官网的字体转换生成页,将设计师索要的字体上传并转换成一个 JS 文件然后在下载。
在接着,到下载页面下载 typeface.js 文件
然后,具体实例请看如下代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Using typeface.js</title>
<script type="text/javascript" src="typeface-0.14.js"></script>
<script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
</head>

<body>
<!-- 使用自定义字体的标签必须添加 typeface-js 类名。
然后写入字体名称如实例中的 helvetiker
字体名称就是特殊字体转换成的 JS 文件名的前缀,
例如实例中的 helvetiker_regular.typeface.js 字体名称即为 helvetiker
注:每种特殊字体生成的 JS 文件名的前缀都是不一样的,都是该种字体的名称。-->
<div class="typeface-js" style="font-family: helvetiker"> Text here in Helvetiker font... </div>
</body>
</html>

官方主页:http://typeface.neocracy.org/

原文地址:https://www.cnblogs.com/2019gdiceboy/p/12752981.html