使用自定义字体相关问题

首页 > 代码库 > 使用自定义字体相关问题

使用自定义字体相关问题

2024-08-28 08:10:07 217人阅读

1、自定义字体生成：

自定义字体一般只有ttf格式的，所以需要根据ttf文件转换成我们需要的eot、woff、svg文件，以适用各个浏览器，如图参考：

技术分享

转换工具：

　 FontsQuirrel、onlinefontconverter

ttf2eot：https://github.com/fontello/ttf2eot

　 ttf2woff：https://github.com/fontello/ttf2woff

　 ttf2svg：https://github.com/qdsang/ttf2svg

　字体下载：

　 http://fonts.mobanwang.com/

　 http://www.touwenzi.com/

声明方式：

@font-face {
    font-family:"Jiancai";/*给自定义字体名称*/
    src: url("/fonts/Jiancai.eot");/* IE9 */
    src: url("/fonts/Jiancai.eot?#iefix") format("embedded-opentype"),/* IE6-IE8 */
    url("/fonts/Jiancai.woff") format("woff"),/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url("/fonts/Jiancai.ttf") format("truetype"), /*Safari,Android,IOS*/
    url("/fonts/Jiancai.svg#Jiancai") format("svg");/* iOS 4.1- */
    font-style: normal;
    font-weight: normal;}

引用：

body{font-family: ‘Jiancai‘;}

#iefix的作用：

IE9 之前的版本没有按照标准解析字体声明，当 src 属性包含多个 url 时，它无法正确的解析而返回 404 错误，而其他浏览器会自动采用自己适用的 url。因此把仅 IE9 之前支持的 EOT 格式放在第一位，然后在 url 后加上 ?，这样 IE9 之前的版本会把问号之后的内容当作 url 的参数。至于 #iefix 的作用，一是起到了注释的作用，二是可以将 url 参数变为锚点，减少发送给服务器的字符。（摘自网络）

2、微信QQ浏览器X5内核不支持@font-face的问题：

务必将ttf、eot、woff、svg文件都引入到项目中，如上“声明方式”

3、引用中文字体，文件过大，加载缓慢的问题：

问题引出：英文只有 26 个字母，一套字体不过几十 KB；而汉字却有数万个，导致字体文件通常有好几 MB 大小，文件体积比英文字体大数百倍，按照中国网络环境的现状，用于实际项目中显然不现实。

解决方式：压缩与转码，剔除没有使用的字符，通常可将数 MB 的字体压缩成数十 KB 大小，解决中文字体过大的问题，并编码成跨平台兼容的格式。

使用工具：【字蛛】http://font-spider.org/

　 安装：

a、安装nodeJs

　具体安装nodeJs步骤此处省略。

为解决使用 npm install 命令安装模块（font-spider）速度慢的问题，在安装font-spider之前先安装镜像资源，这里推荐安装淘宝镜像：

首先打开nodejs客户端
输入一下命令：
npm config set registry http://registry.npm.taobao.org
npm info underscore （如果上面配置正确这个命令会有字符串response）

命令行指定
npm –registry http://registry.cnpmjs.org info underscore

b、安装字蛛

　输入命令：npm install font-spider -g

技术分享