@font-face 字体不工作答案

【问题标题】：@font-face fonts not working@font-face 字体不工作
【发布时间】：2014-05-07 10:44:58
【问题描述】：

我正在尝试从本地存储中获取字体。

@font-face {
    font-family: const;
    src: url(const.ttf);
}

.fp_title1 {
    font-family: 'const', trebuchet ms;
    font-size: 350%;
    font-weight: 100;
    -webkit-text-stroke: 1px;
}

这行不通。我尝试使用带引号和不带引号的“font-family”重命名文件...

我也尝试过将字体与 HTML 链接

<link href='CSS/const.ttf' rel='stylesheet' type='text/css'>

它在同一个文件夹中，名称是正确的。没看懂。

编辑： 我的 CSS 文件已经链接，字体是 .ttf

【问题讨论】：

您为 css 提供了错误的路径。将其更改为 href='Css/const.css'
我在本地测试过。它工作正常。放上jsfiddle链接，方便我们测试。
@Ullas 我的 CSS 文件已链接。字体为.ttf

标签： css fonts

【解决方案1】：

您的代码中可能有 2 个错误：路径和扩展。并使用以下格式以及 ttf：

@font-face {
  font-family: 'const';
  src: url('const.eot'); /* IE9 Compat Modes */
  src: url('const.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('const.woff') format('woff'), /* Modern Browsers */
       url('const.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('const.svg#svgFontName') format('svg'); /* Legacy iOS */
}

有助于创建网络字体的网址：

http://www.fontsquirrel.com/tools/webfont-generator

http://www.font-face-generator.com/

【讨论】：

如果您希望 chrome 使用 .svg 而不是 .woff，您可能需要将 .svg 推得更远
是的，完全正确！为您的发现 +1 :)
@KunJ 它说我的字体已损坏...但是 Windows 字体查看器正确显示它，我从官方来源下载了字体。 link
我之前已经尝试过很多次，只是尝试了 arial.ttf，它给了我完美的结果。可能是您的字体有一些损坏的字形。
让我用你的字体检查一下。

【解决方案2】：

CSS 有一个.css 文件扩展名，你给了它.ttf

【讨论】：

但它是一个 .ttf 文件？
没有。您链接到 css 的字体是 .ttf。 css 文件仍然是 .css。就像您在 CSS 中将图片链接为背景一样。