css - 包含哈希时,Chrome 不会为字体呈现 svg

标签 css google-chrome fonts svg font-face

Chrome 比 TTF 更好地呈现 SVG 字体,所以我想强制它使用 SVG 文件。但是当我在声明中只包含 SVG 时,Chrome 不会找到/应用字体。如果我删除哈希符号,它应用它(可能是在 svg 中找到的第一件事)!我做错了什么?

文件结构

/
/fonts
/styles

样式.css

@font-face {
    font-family: "TeXGyreHerosCnBoldItalic";
    src: url( "../fonts/texgyreheroscn-bolditalic-webfont.svg#TeXGyreHerosCnBoldItalic" ) format("svg" );
    font-weight: normal;
    font-style: normal;

}

html

<div style="font-family: 'TeXGyreHerosCnBold';">Some text</div>

如果我改为这样做,它会起作用:

src: url( "../fonts/texgyreheroscn-bolditalic-webfont.svg" ) format("svg" );

最佳答案

正如@cinnamon 所建议的,Chrome 团队似乎决定您不应该遍历 SVG:https://code.google.com/p/chromium/issues/detail?id=128055#c6

@Cinnamon 在这里有更多信息:https://stackoverflow.com/a/16042903/857025

关于css - 包含哈希时,Chrome 不会为字体呈现 svg,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17198903/

相关文章:

javascript - Chrome/Safari HTML5 视频全屏模式无法正常工作

css - 如何为div中的水平溢出添加样式

html - 换行溢出div

html - Chrome 63+ 抛出 [DOM] 错误,输入类型密码和非唯一 ID

css - 在 Visual Studio 中调试时如何强制 Chrome 浏览器重新加载 .css 文件?

firefox - Firefox 中 Materialise 的 Roboto 字体显示问题

android - 如何在 Android Studio 中更改文本的字体?

java - 调用 FontFactory.getFont() 方法后无法删除文件

javascript - 用户名和密码的 Ionic 弹出模板

css - 如何在响应式轮播上叠加 div