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字体，但是一些稍微较旧的移动设备却没有。对于这些，您可能需要添加嵌入式opentype字体（.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');
}

Answer 2

将此代码用于跨浏览器功能!!!

@font-face {
        font-family: 'YourFontName';
        src: url('YourFontName.eot'); /* IE9 Compat Modes */
        src: url('YourFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('YourFontName.woff') format('woff'), /* Modern Browsers */
             url('YourFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('YourFontName.svg#svgFontName') format('svg'); /* Legacy iOS */
        }

将你的ttf格式转换为eot，woff和svg..please到达网站http://www.fontsquirrel.com/tools/webfont-generator并转换为这些格式

Answer 3

通过在谷歌上搜索

来使用@ font-face生成器

移动网站上的字体

3 个答案: