html - 手机网站上的字体

我尝试使用CSS在移动网站中添加字体，如下所示：

CSS文件：

@font-face { font-family: Aapex; font-weight: bold; src: url('../fonts/Aapex.ttf');}
#header_txt{
        font-family: Aapex;
        font-size: 48px;
        color: #fff;
}

它可以完美地在计算机浏览器上运行，但不能在移动设备上运行。
有解决这个问题的主意吗？

最佳答案

如您所见，here所有主要移动浏览器的所有当前版本都支持.ttf字体，但是某些稍旧的移动设备不支持。对于这些，您可能需要添加嵌入式opentype字体（.eot），Web Open字体格式（.woff）和可伸缩矢量图形（.svg）格式以支持所有内容。

您的字体声明将如下所示：

@font-face {
    font-family: 'Aapex';
    src: url('fonts/Aapex.eot');
    src: url('fonts/Aapex.eot?#iefix') format('embedded-opentype'),
         url('fonts/Aapex.woff') format('woff'),
         url('fonts/Aapex.ttf') format('truetype'),
         url('fonts/Aapex.svg#Aapex') format('svg');
}