CSS - 无法使用下载的字体答案

【问题标题】：CSS - Unable to use downloaded fontsCSS - 无法使用下载的字体
【发布时间】：2014-04-14 15:59:56
【问题描述】：

预装了 2 种特定字体。它们在 Chrome 中渲染得很好，但在 Firefox 中却不行。所以我使用@font-face 包含了字体，以便下载它们。

CSS：

@font-face
{
  font-family:Elephant;
  src:url('/Styles/Fonts/elephant.ttf');

  font-family:Harrington;
  src:url('/Styles/Fonts/Harrington.ttf');
}

.title
{
  font-family:Elephant;
}
.title2
{
  font-family:Harrington;
}

它们仍然无法在 Firefox 中运行。我需要做什么？

【问题讨论】：

在 Firefox 中你需要有完整的 url ;)
你能举个例子吗？还有其他浏览器怎么样。
使用fontspring.com/blog/the-new-bulletproof-font-face-syntax和fontsquirrel.com/tools/webfont-generator转换多种字体类型
访问 fontsquirrel.com/fontface/generator 并下载包含所有必需字体类型和文件的软件包
谢谢大家。 @chris 回答对我有用。猜猜看……在 IE 中也是……

标签： css fonts

【解决方案1】：

你的下载字体链接应该是这样的：

@font-face
{
    font-family: 'elephant';
    src: url('/Styles/Fonts/elephant.eot?#') format('eot'), /* IE6–8 */
    url('/Styles/Fonts/elephant.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/Styles/Fonts/elephant.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

您可以使用Web Font Ganarator 将您的字体转换为Woff 和eot 和svg 格式

【讨论】：

【解决方案2】：

主要问题是您需要为您导入/下载以在 CSS 中使用的每种字体设置单独的 @font-face 规则：

@font-face {
  font-family: "Elephant";
  src: url("/Styles/Fonts/elephant.ttf");
}

@font-face {
  font-family: "Harrington";
  src: url("/Styles/Fonts/Harrington.ttf");
}

【讨论】：

这不起作用，因为.ttf 字体系列适用于 Safari、Android、iOS
@jycr753 请参见上面的链接。如果这还不够，这里有一个来自 Mozilla 开发者网络的网页，他们在示例中使用了.ttf：tiny little link。
是的，但这仍然只适用于新浏览器。为什么不响应 OP 指向声明所有需要参数的正确方法。 stackoverflow.com/questions/11002820/…
无论哪种方式...很有趣的伙伴，但我在课堂上；）所以让我们同意不同意
@jycr753 我并不是要反复挑战你或任何事情，但你（再次）不正确。 Firefox 对 TTF 的支持可以追溯到 3.5 版，Chrome 一直支持它。唯一有问题的浏览器是旧版本的 IE。在课堂上玩得开心。

【解决方案3】：

在 Firefox 上，你应该这样写：

@font-face {
font-family: ‘FONT’;
src: url(‘FONT.eot’);
src: url(‘FONT.eot?#iefix’) format(‘embedded-opentype’),
url(‘FONT.woff’) format(‘woff’),
url(‘FONT.ttf’) format(‘truetype’),
url(‘FONT.svg#FONT’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

FONT 是你的字体，Elephant 或 Harrington。

【讨论】：