Question

在使用自托管网络字体时，我的Medion Lifetab S7852（Android 4.4.2 - 由联想制作，据我所知）在Android浏览器中有一些非常奇怪的问题：

第1步：

首先，caniuse.com明确指出Android浏览器支持自Android 2.2（http://caniuse.com/#feat=ttf）以及自Android 4.4（http://caniuse.com/#feat=woff以来的WOFF）以来的TTF。因此，使用具有以下语法的@ font-face应该可以正常工作（Font Squirrel的生成器生成的不同字体格式（http://www.fontsquirrel.com/tools/webfont-generator））：

@font-face
{
    font-family:'daniel';
    src: url('../webfonts/daniel-webfont.eot');
    src: url('../webfonts/daniel-webfont.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/daniel-webfont.woff2') format('woff2'),
        url('../webfonts/daniel-webfont.woff') format('woff'),
        url('../webfonts/daniel-webfont.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}

我在这里实现了这个演示：http://www.sym-work.de/wf/example01

这在我的三星Galaxy S Advance（Android 2.3.6）的Android浏览器，我的Galaxy S4（Android 5.0.1），Chrome 44，Dolphin 11.4，Firefox 40和Opera 30的Android浏览器上工作正常Lifetab S7852（Android 4.4.2），我的iPhone 4S上的Safari和我的iPad 2（都是iOS 8.4.1）以及Windows和Linux上几乎每一个中途的最新浏览器。

然而不在Android 4.4.2浏览器和我的Lifetab上的Maxthon 4.5.1.2000中工作（似乎Maxthon基本上只是系统Android浏览器的备用GUI？）。它不会使用指定的字体并回退到sans-serif。

让我感到困惑的是，它在我的石器时代的Android 2.3手机上运行得非常好，但在不同的设备上却没有在Android 4.4上运行......

第2步：

最后添加一个SVG字体，根据所有来源不应该是必要的：

@font-face
{
    font-family:'daniel';
    src: url('../webfonts/daniel-webfont.eot');
    src: url('../webfonts/daniel-webfont.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/daniel-webfont.woff2') format('woff2'),
        url('../webfonts/daniel-webfont.woff') format('woff'),
        url('../webfonts/daniel-webfont.ttf') format('truetype'),
        url('../webfonts/daniel-webfont.svg#danielregular') format('svg');
    font-weight:normal;
    font-style:normal;
}

在这里演示：http://www.sym-work.de/wf/example02

这种作品 - 字体被渲染，但它在Android 4.4.2浏览器中遭受了沉重的FOIT（Flash Of Invisible Text，＆＃34;闪烁＆＃34;）。每次我通过左侧菜单更改页面时，所有文本在每次加载时都不可见至少半秒（有时更长）。我希望在第一次加载网站时会发生这种情况，因为浏览器可能需要一段时间才能下载字体，但之后就不应该再次发生，因为我希望缓存字体文件。

第3步：

我改变字体源的顺序并将SVG放在第二个位置：

@font-face
{
    font-family:'daniel';
    src: url('../webfonts/daniel-webfont.eot');
    src: url('../webfonts/daniel-webfont.svg#danielregular') format('svg'),
        url('../webfonts/daniel-webfont.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/daniel-webfont.woff2') format('woff2'),
        url('../webfonts/daniel-webfont.woff') format('woff'),
        url('../webfonts/daniel-webfont.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}

在这里演示：http://www.sym-work.de/wf/example03

字体呈现，完全没有FOIT，Android 4.4.2浏览器的行为与所有其他浏览器一样。

然而，这对我来说不是一个可以接受的解决方案：SVG的文件大小明显大于WOFF和TTF - 我不想告诉你浏览器（（仍然）支持SVG字体）他们的第一选择应该是下载最大的文件。

我认为它可能与丢失/错误的MIME类型有关，所以我添加了：

AddType application/font-woff .woff
AddType application/vnd.ms-fontobject .eot
AddType application/octet-stream .ttf
AddType image/svg+xml .svg

到Apache的.htaccess。完全没有变化。

此外，我尝试的所有Google字体标本（例如https://www.google.com/fonts/specimen/Poiret+One）都无法正常工作，只显示默认的sans-serif字体。

这里发生了什么？为什么我的Android 4.4.2浏览器需要SVG字体？为什么SVG需要位于源列表之上以防止每次加载时出现大量FOIT /闪烁？这可能是由Medion /联想的某种奇怪的Android实现造成的吗？

有人可以在Android 4.4.2（和/或4.0 / 4.1 / 4.2 / 4.3）上重现/确认此问题吗？如果你不体验到这个问题并且我的第一个示例在您的特定设备上的Android浏览器中工作正常，呈现字体并且不闪烁也将非常有用一点都不我搜索了很多，但找不到任何有用的东西。这是一些奇怪的错误，由于某些原因我只能体验吗？

提前致谢！

Webfonts / @ font-face：我的Android 4.4.2浏览器只会在每次加载页面时使用SVG字体并闪烁（FOIT）

0 个答案: