CSS 如何为所有浏览器以 ttf 格式嵌入自定义网站字体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16685979/
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
How do I embed a custom website font in ttf format for all browsers?
提问by Sami Dz Hamida
On my website I'm using a custom font which I have uploaded. It seems to be choosing when to work intermittently. It works on some computers/browsers, but not on others. It is also mapped correctly.
在我的网站上，我使用的是我上传的自定义字体。它似乎在选择间歇性工作的时间。它适用于某些计算机/浏览器，但不适用于其他计算机/浏览器。它也被正确映射。
This is my code:
这是我的代码：
<style type="text/css">
@font-face {
font-family: 'AgencyFBRegular';
src: url('agencyr.eot');
src: url('agencyr.eot?#iefix') format('embedded-opentype'),
url('agencyr.woff') format('woff'),
url('AGENCYR.TTF') format('truetype'),
url('agencyr.svg#AgencyFBRegular') format('svg');
}
h3 { font-family: 'Agency FB', sans-serif; font-size: 26px; font-weight:normal; text-align: left; line-height: 100%;
border-bottom: 1px solid #484848; padding-bottom: 5px; margin-bottom:7px;
</style>
I thought it was working everywhere until I used a friend's laptop to view it.
我以为它无处不在，直到我使用朋友的笔记本电脑查看它。
Can you see where I'm going wrong?
你能看出我哪里出错了吗？
UPDATE: I have updated font CSS. It seems to be working, but now not on iOS.
更新：我更新了字体 CSS。它似乎有效，但现在不在 iOS 上。
回答by Gangadhar
The following code should work:
以下代码应该可以工作：
@font-face {
font-family:"AgencyFBRegular";
src: url("agencyr.eot") /* EOT file for IE */
}
@font-face {
font-family:"AgencyFBRegular";
src: url("agencyr.ttf") /* TTF file for CSS3 browsers */
}
h3 {
font-family:'Agency FB', sans-serif;
font-size: 26px;
font-weight:normal;
text-align: left;
line-height: 100%;
border-bottom: 1px solid #484848;
padding-bottom: 5px;
margin-bottom:7px;
}
回答by Sakata Gintoki
You need change file name of your font without Uppercase. Like this: from AGENCYR.TTFto agencyr.ttf
您需要更改不带大写的字体文件名。像这样：从AGENCYR.TTF到agencyr.ttf
and in your css file:
并在您的 css 文件中：
src: url('agencyr.ttf');
