前言
说到网站字体,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;}
|
这是最简单的全局字体设置,浏览器会根据字体的先后顺序引入,当前一位失效时,引入下一位