CSS @font-face 不适用于 chrome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9641427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@font-face not working on chrome
提问by Bojan Savic
I'm using the latest version of google chrome and it won't render font face at all.
我正在使用最新版本的谷歌浏览器，它根本不会呈现字体。
I'm running Debian Linux, and all other browsers , including Chromium , show included fonts properly.
我正在运行 Debian Linux，所有其他浏览器（包括 Chromium ）都正确显示了包含的字体。
Font face declaration I'm using is:
我正在使用的字体声明是：
@font-face {
font-family: Dejaweb;
src: url('DejaWeb.ttf');
}
@font-face {
font-weight: bold;
font-family: Dejaweb;
src: url('DejaWeb-Bold.ttf');
}
回答by thelindsaybutler
Whenever @font-face inexplicably doesn't work for me in the supposedly compliant browsers, I drop this in my .htaccess file. Supposedly some browsers won't load fonts hosted on other domains, and this bit of code troubleshoots that, but sometimes it is the only remedy to force fonts to load that are hosted on same domain as well. Generally its more of an issue with Firefox than with Chrome, but I just now used this to force fonts in Chrome while Firefox was working fine. Go figure.
每当@font-face 在据称兼容的浏览器中莫名其妙地对我不起作用时，我就把它放到我的 .htaccess 文件中。据说有些浏览器不会加载托管在其他域上的字体，这段代码可以解决这个问题，但有时它是强制加载托管在同一域上的字体的唯一补救措施。一般来说，Firefox 比 Chrome 更像是一个问题，但我刚刚使用它来强制 Chrome 中的字体，而 Firefox 工作正常。去搞清楚。
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
Another inexplicably weird thing I have had happen with the @font-face syntax was that it wouldn't load font files properly with caps in the name. This only was an issue once, and after repeatedly banging my head against the desk troubleshooting @font-face a bunch of different ways, as a last resort I changed all font files and font-family name to lowercase characters, and it worked fine (I think that was an issue in ever-finicky IE, and only one website I was doing, exact same syntax on another website worked fine with upper and lowercase characters).
我在@font-face 语法中遇到的另一件莫名其妙的奇怪事情是它无法正确加载名称中带有大写字母的字体文件。这只是一次问题，在反复敲打桌面故障排除@font-face 后，作为最后的手段，我将所有字体文件和字体系列名称更改为小写字符，并且效果很好（我认为这是一直挑剔的 IE 中的一个问题，而且我只在做一个网站，另一个网站上完全相同的语法在使用大写和小写字符时都可以正常工作）。
回答by Lenville
If you put your font files in a folder named "fonts" and your CSS files in the folder named "style",then you should write the url like this
如果你把你的字体文件放在一个名为“fonts”的文件夹中，你的 CSS 文件放在名为“style”的文件夹中，那么你应该像这样写 url
@font-face {
font-weight: bold;
font-family: Dejaweb;
src: url('../fonts/DejaWeb-Bold.ttf'); }
I just corrected the same mistake like this.
我只是像这样纠正了同样的错误。
回答by jmishra
Try this
尝试这个
src:url('DejaWeb-Bold.ttf') format('truetype'),
Also if the fonts are available in other different format from where you got them then I suggest writing all the cross browser compatibly in the following manner
此外，如果字体可以从您获得它们的地方以其他不同的格式使用，那么我建议以以下方式兼容地编写所有跨浏览器
@font-face {
font-family: "Dejaweb";
src: url("DejaWeb-Bol.eot") format('embedded-opentype'), /* EDIT correction on this line */
url('DejaWeb-Bol.woff') format('woff'), /* Modern Browsers */
url('DejaWeb-Bol.ttf') format('truetype'), /* Safari, Android, iOS */
url('DejaWeb-Bol.svg#Dejaweb') format('svg'); /* Legacy iOS; correction on this line */
font-weight:bold;
font-style:normal;
}
回答by Mayank Gupta
@font-face {
font-family: 'FONT-NAME';
src: url('RELATIVE-FONT-URL') format('FONT-FORMAT');
}
div {
font-family: 'FONT-NAME';
font-weight: normal;
font-style: normal;
}
Adding the font-weight and font-style with normal in value worked for me.
添加具有正常值的 font-weight 和 font-style 对我有用。
