多语言展示
当前在线:647今日阅读:86今日分享:14

@font-face html字体的思源黑体的引用

最近做一个XX网页,要求字体为思源黑体,总是出现引用失败,这里总结下经验,供大家参考
工具/原料
1

webstrom

2

思源黑体的TTF文件: SourceHanSansCN-Regular.TTF

方法/步骤
1

控制面板 --> 字体-->找到思源黑体的文件(如果没有可以到网上下载)

2

百度下:font-face生成器根据提示上传 SourceHanSansCN-Regular.TTF可以得到以下文件:SourceHanSansCN-Regular.woff2, SourceHanSansCN-Regular.woffSourceHanSansCN-Regular.ttf, SourceHanSansCN-Regular.eotSourceHanSansCN-Regular.svg, SourceHanSansCN-Regular.otf(思源黑体和微软雅黑非常的相似,建议再次下载一个可以区别的字体)

3

新建文件夹fonts,将字体文件复制该文件夹下

4

新建style.css超越Web安全字体:@font-face基本的用法如下:@font-face {    font-family: 'Awesome Font';    src: url('awesome-font.ttf'); }

5

页面使用引用css:使用class content-1, content-1

6

在浏览器确定是否引用成功

注意事项

生成各种的字体文件的源文件必须是:.TTF结尾文件,这个文件的包含了所必须的,其他的缺少

推荐信息