1.下载字体：
（e.g.网站）https://fonts.google.com/?selection.family=Merriweather|Roboto|Slabo+27px
2.将下载的字体ttf格式转成多种格式（以便于各个浏览器兼容），
（e.g.）转换字体网站：http://www.freefontconverter.com/#
在本例子中，笔者将字体保存在
保存字体.PNG
3.自定义的一个css文件（上图中最后一个stylesheet.css文件），内容如下：
@font-face {
font-family: 'mynewfont';
src: url('C:/Users/123/Desktop/cssfont/erasdust/erasdust.eot'); /* IE9 Compat Modes */
src: url('C:/Users/123/Desktop/cssfont/erasdust/erasdust.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('C:/Users/123/Desktop/cssfont/erasdust/erasdust.woff') format('woff'), /* Modern Browsers */
url('C:/Users/123/Desktop/cssfont/erasdust/erasdust.ttf') format('truetype'), /* Safari, Android, iOS */
url('C:/Users/123/Desktop/cssfont/erasdust/erasdust.svg') format('svg'); /* Legacy iOS */
}
4.在html中调用：
<!DOCTYPE HTML>
<HTML>
<head>
<link rel='stylesheet' href='C:\Users\123\Desktop\cssfont\erasdust\stylesheet.css' type='text/css'>
<style>
.neuesDemo{font-family:'mynewfont'}
</style>
</head>
<body>
<p class="neuesDemo">Neues Bauen Demo</p>
</body>
</html>
效果如下：
自定义字体3.PNG
另外，也可以在html中加入css，效果一样（以下分别是绝对路径和相对路径）：
自定义字体1.PNG
自定义字体2.PNG
重点提示（笔者自己踩的坑）：
不要偷懒复制文件中的路径，你复制出来的路径格式类似于：
C:\Users\123\Desktop\cssfont\erasdust
但是实际上路径是：
C:/Users/123/Desktop/cssfont/erasdust/
网友评论