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

最新推荐文章于 2024-01-26 18:26:56 发布

weixin_34236497

最新推荐文章于 2024-01-26 18:26:56 发布

阅读量591

点赞数

文章标签： javascript xhtml 操作系统 ViewUI

原文链接：https://my.oschina.net/cimu/blog/161545

版权

为什么80%的码农都做不了架构师？>>>

通过第三方封装JS脚本 typeface.js ，可以在网页中嵌入特殊字体，从而不必把文字转成图片了。

使用方法：

首先，向设计师索要操作系统中不存在的字体，而设计稿中又出现的字体。
接着，去 typeface.js 官网的字体转换生成页，将设计师索要的字体上传并转换成一个 JS 文件然后在下载。
在接着，到下载页面下载 typeface.js 文件

然后，具体实例请看如下代码：

HTML Code：

<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://my.oschina.net/cimu/blog/161545