记一次网站字体采用思源字体

发表于 更新于 阅读次数：

背景

客户想让他的网站都显示思源字体

参考

fontsquirrel
https://www.fontsquirrel.com
CSS @font-face属性实现在网页中嵌入任意字体
http://www.jb51.net/css/23073.html

如何在网页中嵌入自己想要的字体(实例下载)
http://blog.csdn.net/sinolzeng/article/details/41802951

linux安装字体（错误的方法）

下载字体

下载思源全套字体（字体文件名称：NotoSansHans）

1
https://pan.baidu.com/s/1uJBBK

windows的字体比较多，其字体文件位于 C:\WINDOWS\Fonts,如果想额外安装也可以到这里找找

字体格式有ttf和otf等多重后缀，linux上ttf和oft都可以

移动文件到服务器指定位置

1
2
3
4
# mkdir /usr/share/fonts/NotoSansHans
# cp arial*.otf /usr/share/fonts/NotoSansHans/
或
# cp arial*.ttf /usr/share/fonts/NotoSansHans/

为刚加入的字体设置缓存使之有效

1
2
# cd /usr/share/font/NotoSansHans
# fc-cache -fv

使用

因为我在windows里先安装了思源字体，并在Noto Sans S Chinese中找到了思源字体，所以font-family中我用Noto Sans S Chinese

1
2
3
4
5
6
body {
    font-family: "Noto Sans S Chinese", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #777777;
    font-size: 14px;
}

问题

为什么文件名是NotoSansHans，安装后需要Noto Sans S Chinese
这里有个疑惑

疑惑解决（2017.12.8）

自己本地安装了ttf包后，生成了Noto Sans S Chinese字体，可是这个字体不是服务器里的

也就是说，我在linux上安装的字体只能在linux上使用,浏览器里使用一个是看客户端有没有这个字体，另一个是你的css中引入如ttf之类的字体资源，但是对于中文来说，要把整个字体都方法css上，大概要10M以上（这个肯定不是个办法）

css font-face引入(只能引入英文字体)

在
https://www.fontsquirrel.com
中找到自己需要的字体

1
2
3
4
5
6
7
8
9
10
@font-face {
font-family: 'fontNameRegular';
src: url('fontName.eot');
src: local('fontName Regular'),
local('fontName'),
url('fontName.woff') format('woff'),
url('fontName.ttf') format('truetype'),
url('fontName.svg#fontName') format('svg');
}
/*其中fontName替换为你的字体名称*/

总结

想在网页中全部使用某不常用的字体，几乎是不可取的方法，除非客户端里大家都安装了该字体