边缘浏览器不加载字体?

[英]Edge Browser not loading font-face?

本文翻译自 bluedevil2k 查看原文 2015/09/11 4734 css/ html/ microsoft-edge/ font-face/ local

Using the normal CSS font-face does not appear to work properly on the new Windows 10 Edge browser. Works fine on IE11 and all other browsers. Has anyone else seen this? Seems like a bug in the browser.

在新的Windows 10 Edge浏览器上，使用普通CSS字体并不能正常工作。适用于IE11和所有其他浏览器。有人看过这个吗?看起来像是浏览器中的一个bug。

Here’s the CSS we’ve been using.

这是我们一直在使用的CSS。

@font-face {
    font-family: "Univers";
    src: url("../fonts/univers-webfont.eot");
    src: local(Univers), url("../fonts/univers-webfont.eot"), url("../fonts/univers-webfont.svg"), url("../fonts/univers-webfont.ttf"), url("../fonts/univers-webfont.woff");
    font-weight: normal;
    font-style: normal;
}

.button_black {
    font-family: "Univers";
    font-size: 18px;
    color: @slb-off-black-1;
}

1 个解决方案

#1

Short Answer

Put quotes around the font name when using the local("Font Name") syntax.

在使用本地(“字体名称”)语法时，在字体名周围加上引号。

Explanation

"Univers" renders fine in both Edge and Firefox. Your "Please log in..." element, though, is targeting "Univers Condensed", which renders in Edge only if you use local("Univers Condensed") with quotes. That is probably because Edge is more strict that Firefox is. MDN says...

“Univers”在Edge和Firefox中都表现良好。您的“请登录……”元素是针对“Univers凝聚态”的，只有当您使用本地(Univers凝聚态)和引号时才会呈现边缘。这可能是因为Edge比Firefox更严格。MDN说……

src URL for the remote font file location, or the name of a font on the user's computer in the form local("Font Name"). You can specify a font on the user's local computer by name using the local() syntax. If that font isn't found, other sources will be tried until one is found.

用于远程字体文件位置的src URL，或用户计算机上以“本地”形式显示的字体名称(“字体名称”)。您可以使用local()语法在用户的本地计算机上通过名称指定字体。如果找不到该字体，将尝试其他来源，直到找到一个。

Some Snips

Here are some screen shots that show the problematic CSS and HTML on your site.

以下是一些屏幕截图，显示了网站上存在问题的CSS和HTML。

Univers Condensed

No Quotes on `local()`

智能推荐

注意！

本站翻译的文章，版权归属于本站，未经许可禁止转摘，转摘请注明本文地址：http://www.silva-art.net/blog/2015/09/11/9c95a5df0872c836e0221e879abc262d.html。

猜您在找

@ font-face没有在网页上加载字体 - @font-face not loading fonts on webpages 我可以强迫浏览器使用CSS @font-face而不是系统上安装的字体吗? - Can I force the browser to use CSS @font-face instead of font installed on system? @ font-face无法在Android浏览器中使用 - @font-face not working in Android browsers 跨浏览器“防弹”CSS3 @ font-face语法 - cross-browser “bullet-proof” CSS3 @font-face syntax b0字体API使用浏览器检测。如何获得字体变化的字体? - Google Font API uses browser detection. How to get all font variations for font-face