自定义网站字体

前言

说到网站字体，chrome 支持性是最好的，IE 是最差的，为了防止 IE 对我们字体的残害，让我们一起抵制 IE 吧
话归正传，自定义全局字体是很简单的，只需要几行 CSS 就成

各大浏览器支持字体格式

浏览器 eot woff/woff2 ttf svg
IE √ √ √（9+）
chrome √ √ √
firefox √ √
Safari √ √ √

引入字体

引入字体的 CSS 代码就用阿里的举例吧

1
2
3
4
5
6
7
8
9
10
@font-face {
  font-family: 'webfont';/*这里为自定义引入字体的名称（后面会使用）*/
  font-display: swap;
  src: url('//at.alicdn.com/t/webfont_3nif3r3wsh1.eot'); /* IE9*/
  src: url('//at.alicdn.com/t/webfont_3nif3r3wsh1.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('//at.alicdn.com/t/webfont_3nif3r3wsh1.woff2') format('woff2'),
  url('//at.alicdn.com/t/webfont_3nif3r3wsh1.woff') format('woff'), /* chrome、firefox */
  url('//at.alicdn.com/t/webfont_3nif3r3wsh1.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('//at.alicdn.com/t/webfont_3nif3r3wsh1.svg#思源黑体-粗') format('svg'); /* iOS 4.1- */
}

使用过程中仅需要保留自己需要的字体格式，替换掉字体地址即可
例如本站所使用的

1
2
3
4
5
6
/*自定义字体*/
@font-face {
  font-family: 'hmfont';
  url('//source.cnortles.top/fonts/HarmonyOS_Sans_Bold.ttf') format('truetype')
}
/*自定义字体*/

设置全局字体

1
html,body {font-family: hmfont,Tahoma, sans-serif;}

这是最简单的全局字体设置，浏览器会根据字体的先后顺序引入，当前一位失效时，引入下一位