Question

我有几个关于浏览器如何尝试呈现自定义字体的问题。希望这些问题的答案能帮助我解决我现在遇到的问题。

假设我有一个@font-face声明

@font-face {
    font-family: 'museo_700regular';
    src: url('some-font.eot');
    src: url('some-font-iefix.eot') format('embedded-opentype'),
         url('some-font.woff') format('woff'),
         url('some-font.ttf') format('truetype'),
         url('some-font.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

浏览器是否尝试阅读/呈现some-font.eot，如果它不起作用，请尝试some-font-iefix.eot等？
如果CSS文件之间存在冲突的@font-face声明，浏览器会尝试读取最后一个吗？
如果正确读取/呈现前一个并且第二个无效，该怎么办？浏览器是否与第一个保持一致？

Answer 1

浏览器是否尝试读取/呈现some-font.eot，如果它不起作用，请尝试some-font-iefix.eot等？

<强>八九不离十即可。不同的浏览器支持不同类型的字体。浏览器确定它知道如何渲染，然后下载并使用那个。

如果CSS文件之间存在冲突的@font-face声明，浏览器会尝试读取最后一个吗？

是即可。 CSS始终是分层的。如果最下面的声明是将要使用的声明。

如果正确读取/渲染前一个并且第二个无效，该怎么办：浏览器是否与第一个保持一致？

假设CSS在语法上有效，否。如果它无效，它将不会覆盖以前的声明（因为浏览器不知道如何处理它）。

浏览器在尝试呈现自定义字体时遵循的规则是什么？

1 个答案: