CSS添加本地字体

标签：效果   加载本地   引入   blog   embed   字体   har   需要   问题   

项目中用到了集成商的硬件，安卓系统，通过套壳浏览器来展示一个页面。
其中一个需求是一段标题文字用宋体展示，很普通，对吧。

在本地用chrome调试时毫无问题，但是这个设备展示时，一直是黑体。
于是尝试直接用设备自带的浏览器打开，果不其然，还是展示黑体。

我们的手机肯定是有宋体的，怀疑是这个硬件精简掉了宋体（或者原生安卓本来就不带宋体？）。
于是想到了通过css的font-face来加载本地字体。

下载了simsun.ttf，提供下面这段代码，测试发现无效：

@font-face {
	font-family: ‘SimSun‘;
	src: url(‘simsun.ttf‘)  format(‘truetype‘), /* Safari, Android, iOS */
  }

查看浏览器的network栏，发现也没有字体下载的动作。。。

几乎要放弃的时候，找到了这篇文章（引入font-face不管用）

其实之前也搜到一些内容，说是IE要使用eot格式字体才行，但是找了很久，就连宋体这种字体，都搜到了ttf格式，而没有搜到eot格式。
这篇文章首先给出了生效的css，然后还给出了https://www.fontke.com/tool/fontface/这个网站，能帮忙将ttf转化成各种我需要的字体。
通过这个网站，生成了这几种字体：ttf,eot,woff,woff2,svg。

最终生效的css如下：

@charset "UTF-8";

@font-face {
  font-family: "simsun-my";
  src: url("simsun.eot"); /* IE9 */
  src: url("simsun.woff2") format("woff2"),
       url("simsun.woff") format("woff"),
       url("simsun.ttf") format("truetype"),
       url("simsun.eot") format("embedded-opentype"),
       url("simsun.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

其实无法得知最终在硬件上其效果的是哪一句，但是最终效果生效，而以上写法应该也是确保兼容性的一种写法。

CSS添加本地字体

标签：效果   加载本地   引入   blog   embed   字体   har   需要   问题   

原文地址：https://www.cnblogs.com/mosakashaka/p/12608949.html