通过 CSS 自定义字体答案

【问题标题】：Custom font via CSS通过 CSS 自定义字体
【发布时间】：2011-08-24 12:20:03
【问题描述】：

我现在正在学习 php、html 和 css，我正在尝试在我的网站上使用自定义字体。我找到了允许这样做的@font-face 属性，但它不起作用。我究竟做错了什么？ css：

@font-face {font-family: LazurskiCTT;src:url(../sources/fonts/ie/LazurskiCTT Regular.eot);}
/*IE*/ 
@font-face {font-family:LazurskiCTT;src:url(../sources/fonts/LazurskiCTT Regular.Ttf);}
/*Other browsers*/
#myFonts{font-family:LazurskiCTT;}

html:

<p id="myFonts">Lazurski</p>

也许是因为我在本地机器上使用它？我在 FireFox 中运行它。

【问题讨论】：

如果你是这样声明的，我相信第二条规则会赢（即使浏览器不理解字体文件类型）。请参阅 @font-face 上的 this blog post。

标签： html css fonts font-face custom-font

【解决方案1】：

您在.. 之后缺少一个斜线/，可能已经是它了。

请注意，大多数基于 Linux 的系统都区分大小写 - 如果 .Ttf 不是这样写完全，它可能无法工作。

有关如何在浏览器中设置自定义字体的详细演练，另请参阅此问题：Error while using the custom fonts in css

【讨论】：

@Kevin 的答案只是最初只包含“你缺少斜线”位 - 后来它意外地增长了:)
什么维基？？我有一个构造，但无法运行它。
thanx，字体扩展为*.Ttf。

【解决方案2】：

它应该可以在您的本地计算机上运行。请尝试以下操作。

确保字体路径正确。

@font-face {
font-family: CustomFont;
src: url('CustomFont.otf');
}
p {font-family:CustomFont, Helvetica, Arial}

<p>Text here</p>

【讨论】：

谢谢，我试了试，但没有结果。 Font squirrel 是个好东西，说不定会有用。

【解决方案3】：

假设你的字体路径是正确的，试试这个。报价...有人说没有必要，但我发现它效果最好。在某些情况下，我的 CSS 会在没有引号的情况下中断（特别是当路径中包含空格时）。

注意：使用此站点将您的 ttf 转换为 eot 以使其在 IE 上运行（将 .ttf 和 .eot 放在同一目录中）。 http://ttf2eot.sebastiankippe.com/

@font-face {
    font-family: "LazurskiCTT"; 
    src:url("../sources/fonts/ie/LazurskiCTT Regular.eot"); /*IE*/
    src:url("../sources/fonts/LazurskiCTT Regular.Ttf") format("truetype"); /*Non-IE*/

}

这适用于我的网站。希望它也对你有用。

【讨论】：

【解决方案4】：

让它工作的最简单（也是最好）的方法是使用 fontsquirrel 的生成器：

http://www.fontsquirrel.com/fontface/generator

【讨论】：