嵌入式字体样式不适用于移动

Question

我正在开发一个响应web应用程序。我遇到了一个问题，字体系列在移动设备上不能像预期的那样工作，但在计算机上却能像预期的那样工作。为什么是这种情况？

代码：

  <link href="css/fonts/fonts.css" rel='stylesheet' type='text/css' />

CSS

@font-face {
font-family: 'uni_sans_regularregular';
src: url('uni-sans-regular-webfont.eot');
src: url('uni-sans-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('uni-sans-regular-webfont.woff') format('woff'),
     url('uni-sans-regular-webfont.ttf') format('truetype'),
     url('uni-sans-regular-webfont.svg#uni_sans_regularregular') format('svg');
font-weight: normal;
font-style: normal;

}




@font-face {
    font-family: 'uni_sans_lightregular';
    src: url('uni-sans-light-webfont.eot');
    src: url('uni-sans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('uni-sans-light-webfont.woff') format('woff'),
         url('uni-sans-light-webfont.ttf') format('truetype'),
         url('uni-sans-light-webfont.svg#uni_sans_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'uni_sans_bold_italicitalic';
    src: url('uni-sans-bolditalic-webfont.eot');
    src: url('uni-sans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('uni-sans-bolditalic-webfont.woff') format('woff'),
         url('uni-sans-bolditalic-webfont.ttf') format('truetype'),
         url('uni-sans-bolditalic-webfont.svg#uni_sans_bold_italicitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'uni_sans_boldregular';
    src: url('uni-sans-bold-webfont.eot');
    src: url('uni-sans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('uni-sans-bold-webfont.woff') format('woff'),
         url('uni-sans-bold-webfont.ttf') format('truetype'),
         url('uni-sans-bold-webfont.svg#uni_sans_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'uni_sans_lightregular';
    src: url('uni-sans-light-webfont.eot');
    src: url('uni-sans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('uni-sans-light-webfont.woff') format('woff'),
         url('uni-sans-light-webfont.ttf') format('truetype'),
         url('uni-sans-light-webfont.svg#uni_sans_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'uni_sans_thinregular';

    font-weight: normal;
    font-style: normal;
}

提前感谢

Answer 1

首先，用文本编辑器打开SVG文件，看看您在SVG的hashtag中所写的名称是否与它在文件中的内容相匹配。

如果匹配，尝试此方法，如果不匹配，则相应地进行调整。

@font-face {
    font-family: 'uni_sans_regular';
    src: url('uni-sans-regular-webfont.svg#uni_sans_regularregular') format('svg');
    src: url('uni-sans-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body { font-family:'uni_sans_regular',Arial,sans-serif; }

如果字体仍然没有在手机上显示，那么我假设您的SVG或WOFF字体文件已经损坏，字体文件的路径不正确，或者由于其他原因(可能是连接缓慢)文件没有下载到移动设备。

SVG文件应该适用于Firefox3.5、Chrome0.3、Safari3.1、Opera9和所有iOS设备。TTF文件将获取IE9和Android2.2。你不需要EOT文件，除非你想要涵盖IE8-。我只是把它缩减到包含的最小数量，这样你就可以缩小范围了。

如果在IIS服务器上承载文件，则可能需要调整服务器设置。IIS将不提供具有未知MIME类型的文件，因此必须将SVG的MIME类型设置为image/svg+xml，类似于WOFF。Microsoft的说明(链接)

如果您在移动设备上使用第三方浏览器应用程序进行测试，请尝试在该设备附带的默认浏览器上进行测试，因为许多第三方应用程序都有自己的怪癖。