CSS如何引入字体包

之前网站上使用了微软雅黑和平方字体,被告侵权。
思源字体和平方字体差不多。而且是开源的。所以要把所有字体更换一下。


遇到的问题:

我使用了font-family:'xxx字体',但是使用了搜狗等浏览器,字体却不显示思源,全部是宋体。


解决办法:

引用字体包
@font-face {
    font-family: 'lato';
    src: url(./font/Lato-Light.ttf);
}
@font-face {
    font-family: "webfontSourceHanSansSC";
    src: url(./font/SourceHanSansCN-Light.ttf);
}
引用
body{
    font-family: "lato", "SourceHanSansSC-Light","Source-Han-Light","Source Han Sans CN","SourceHanSansCN-Light","webfontSourceHanSansSC" !important
}

/ lato 字体只有数字和英文,所以汉字就默认使用下面的字体(思源字体)

/ "SourceHanSansSC-Light","Source-Han-Light","Source Han Sans CN","SourceHanSansCN-Light" 
/ 这个是思源字体的不同写法,为了兼容不同浏览器可以识别该字体

/ "webfontSourceHanSansSC" 这个就比较厉害了。  是上面字体包的引用。
如果前面的字体就没找到,就下载这个字体使用。

字体包下载:

百度云盘链接
密码: fn5j


可忽略:

字体也可以引用不同的字体文件格式

@font-face {
  font-family: "SourceHanSansCN-Light";
  src: url("../font/SourceHanSansCN-Light.otf"),
    url("../font/SourceHanSansCN-Light.ttf");
  font-family: "SourceHanSansCN-Normal";
  src: url("../font/SourceHanSansCN-Normal.otf");
  font-family: "SourceHanSansCN-Regular";
  src: url("../font/SourceHanSansCN-Regular.otf");
}

你可能感兴趣的:(CSS如何引入字体包)