通过CSS自定义字体

Question

我现在正在学习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 中运行它。

- Frankie Drake

---

如果您正确地声明了它，我相信第二个规则会生效（即使浏览器不理解字体文件类型）。请参考@font-face的这篇博客文章。 - Kevin Peno

Answer 1

最简单（也是最好的）方法是使用fontsquirrel的生成器来使其工作： http://www.fontsquirrel.com/fontface/generator

- martnu

Answer 2

假设您的字体路径正确，请尝试以下操作。引号...有些人说这不是必要的，但我发现这样做效果最佳。在某些情况下，如果路径中包含空格，我的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*/

}

这对我的网站有效。希望对你也有用。

- robx

Answer 3

你漏掉了斜杠 / 在 .. 之后，那可能就是原因。

请注意，大多数基于Linux的系统区分大小写 - 如果不完全按照 这种方式 编写，则 .Ttf 可能无法正常工作。

有关如何在各种浏览器上设置自定义字体的详细步骤，请参见此问题：使用CSS时出错的自定义字体

- Pekka

---

@Kevin，最初答案只包含“你缺少一个斜杠”的部分 - 后来意外地变得更多了 :) - Pekka

什么维基？我有一个构建但无法运行它。 - Frankie Drake

谢谢，字体扩展名是*.Ttf。 - Frankie Drake

Answer 4

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

确保您的字体路径正确。

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

---

<p>Text here</p>

- breezy

---

谢谢，我尝试了很多次，但没有结果。Font Squirrel 是个好东西，也许它会有用。 - Frankie Drake