Question

我正在开发一个响应式Web应用程序。我遇到了一个问题，即字体系列在移动设备上没有按预期工作，但它在计算机上按预期工作。为什么会这样？

代码：

HTML

  <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的主题标签中写的名称是否与文件中的名称相符。

如果匹配，请尝试此操作，否则请相应调整。

@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文件适用于Firefox 3.5，Chrome 0.3，Safari 3.1，Opera 9和所有iOS设备。 TTF文件将获取IE9和Android 2.2。除非您想要涵盖IE8-，否则您不需要EOT文件。我只是将它减少到包含的最小数量，这样你就可以缩小问题范围。

如果您在IIS服务器上托管文件，则可能需要调整服务器设置。 IIS不会提供具有未知MIME类型的文件，因此您必须将SVG的MIME类型设置为image / svg + xml，类似于WOFF。 Instructions from Microsoft (link)

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

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

1 个答案: