我们在下载字体文件后会发现字体有很多种,格式也各不相同eot woff2 woff otf ttf都有,导致我们不知道如何引入了!
这里我们可以使用CSS的@font-face
规则来引入多种字体文件格式。这样做的好处是,不同的浏览器可以选择支持的最佳文件格式来加载字体。以下是如何引入您提到的字体文件的示例:
@font-face {
font-family: 'AlibabaPuHuiTi';
src: url('path_to_fonts/AlibabaPuHuiTi-2-55-Regular.eot'); /* IE9及更早版本使用EOT格式 */
src: url('path_to_fonts/AlibabaPuHuiTi-2-55-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('path_to_fonts/AlibabaPuHuiTi-2-55-Regular.woff2') format('woff2'), /* 超现代的浏览器 */
url('path_to_fonts/AlibabaPuHuiTi-2-55-Regular.woff') format('woff'), /* 现代浏览器 */
url('path_to_fonts/AlibabaPuHuiTi-2-55-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('path_to_fonts/AlibabaPuHuiTi-2-55-Regular.otf') format('opentype'); /* 现代浏览器 */
font-weight: normal;
font-style: normal;
}
一旦字体被加载,您就可以在CSS中使用这个字体了:
body {
font-family: 'AlibabaPuHuiTi', sans-serif;
}
此代码首先会尝试加载AlibabaPuHuiTi
字体。如果浏览器不支持或无法找到该字体,则会退回到默认的sans-serif
字体。