字体在网页上无法应用

Question

我正在尝试在网页上应用自定义字体，但有些字体无法应用。请问有人可以帮我吗？

以下是代码：

CSS：

@font-face {
   font-family: 1-ProLook_Athletic;
   src: url('Fonts/QStrikeFonts/1-ProLook_Athletic.TTF');
}

HTML:

<div style="font-size:35px; font-Family: 1-ProLook_Athletic"> 
  The quick brown fox
</div>

- user3168256

---

你尝试过使用@import在CSS中吗？ - Patrick R

你的字体族声明需要使用 '....' 引号。同时，请确保你为正确的浏览器选择了正确的格式。 - DaniP

首先，检查字体文件是否真正被加载（您需要其他文件在所有浏览器中兼容。请参阅此处的“@font-face文件类型”http://www.miltonbayer.com/font-face/）。其次，您需要在文件内部检查名称是否与文件名匹配。还可以尝试将字体名称放在引号中。 - Teknotica

可能是 跨浏览器 @font-face 使用 的重复问题。 - Bram Vanroy

尝试按照这个手动步骤进行操作：http://stackoverflow.com/questions/28082480/how-to-use-wedding-text-in-css-font-family/28083329#28083329 - Mardzis

Answer 1

您漏掉了某些文件格式（woff、woff2、eot、svg），并且浏览器似乎不支持TTF文件。阅读此帖子以使用Web字体：
http://css-tricks.com/snippets/css/using-font-face/

---

正如@Danko所说，您还需要在字体名称声明中添加单引号（即：''）。

- flks

---

如果你不提供更多信息，我无法确认它是否有效。也许这个特定的文件已经损坏了？另外尝试将文件重命名，不要使用“-”或“_”。 - flks

已经尝试在安装后将这些字体文件重命名为MS Word中可用的名称，但是当我尝试在网页上应用时，它们无法工作。 还尝试了去掉“-”和“_”后重命名，但没有结果。 - user3168256

你需要将那种字体转换成Web字体格式，否则它将无法正常工作。在网页上使用字体并不像在电脑上激活一个字体那样简单。 - flks

Answer 2

请确保您当前使用的浏览器支持.TTF格式文件。 同时添加.eot和otf格式文件， 可以尝试使用以下方法：

@font-face {font-family: 1-ProLook_Athletic;src: url(1-ProLook_Athletic.eot);src: local('1-ProLook_Athletic'), local(1-ProLook_Athletic'), 
     url(1-ProLook_Athletic.otf) format('opentype');}

- rajesh