如何在所有浏览器中嵌入自定义网站字体（TTF格式）？

Question

我网站上使用了一种我上传的自定义字体。它似乎会时不时地选择是否起作用。它在一些电脑/浏览器上可以正常工作，但在其他电脑/浏览器上则无法正常工作。并且它的映射是正确的。

这是我的代码：

在我的网站上，我正在使用一个已上传的自定义字体。似乎有时会选择性地起作用。它在一些电脑/浏览器上有效，但在另一些电脑/浏览器上无效。它也被正确映射。

这是我的代码：

<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>

我以为它在所有地方都可以使用，直到我用朋友的笔记本电脑查看它。

你能看出我哪里错了吗？

更新： 我已经更新了字体CSS。它似乎可以工作，但现在在iOS上不能使用。

- SDZ

---

你只嵌入了一个 TTF 字体，你需要为每个目标浏览器使用特定的格式。请查看：http://caniuse.com/ttf，同时也可以参考 http://blog.themeforest.net/tutorials/how-to-achieve-cross-browser-font-face-support/。 - Anil

我在同一个浏览器中查看了它吗？ - SDZ

Answer 1

以下代码应该可以正常工作：

@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;
}

- Gangadhar

Answer 2

您需要将字体文件名更改为小写字母，例如：从 AGENCYR.TTF 更改为 agencyr.ttf

并且在您的CSS文件中：

src: url('agencyr.ttf');

- Sakata Gintoki