html - 手机网站上的字体

Question

我尝试使用如下 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;
}

它在计算机浏览器上完美运行，但在移动设备上运行不佳。 有解决这个问题的想法吗？

Answer 1

如你所见here所有主要移动浏览器的所有当前 版本都支持 .ttf 字体，但是一些稍旧的移动设备不支持。对于这些，您可能需要添加嵌入式开放式字体 (.eot)、Web 开放字体格式 (.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');
}