多个字体eot woff2 woff otf ttf文件如何引入?

css yekong

我们在下载字体文件后会发现字体有很多种,格式也各不相同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字体。

喜欢