纯JS实现网页中自定义字体
es6/js/jQuery技巧
2012-11-16
通过第三方封装JS脚本 typeface.js ，可以在网页中嵌入特殊字体，从而不必把文字转成图片了。
使用方法：
首先，向设计师索要操作系统中不存在的字体，而设计稿中又出现的字体。
接着，去 typeface.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>
读后有收获可以支付宝请作者喝咖啡
湘ICP备15005320号-1
似懂非懂 Powered by doyo.
网站地图