CSS不寻常的字体[重复]

Posted 2023-03-15

【中文标题】CSS不寻常的字体[重复]

【英文标题】：CSS Unusual Font [duplicate]

【发布时间】：2013-01-09 09:23:56

【问题描述】：

可能重复：How to add some non-standard font to a website?

我创建了一个网站，并在我的 CSS 文件中使用从网络下载的字体，它在 Windows 中运行良好，我可以在我的网站上使用它，但如果我在 Linux 上运行我的页面，它当然不起作用因为Linux不知道那种字体，所以我的问题是，如果我将我的页面放在某个服务器上，我需要在服务器上“安装”该字体或类似的东西，或者它是如何工作的？

【问题讨论】：

您正在托管自己的字体？看到这个：fontsquirrel.com/fontface/generator

您需要将字体上传到您的其他html/css/image文件所在目录并给出正确的引用

【参考方案1】：

您需要创建字体的 Web 兼容格式（不同的浏览器需要不同的格式），然后在样式表中使用 @font-face rule 来包含它。例如（这是http://fontsquirrel.com生成的输出）：

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

然后浏览器会下载合适的字体文件并使用它。

【参考方案2】：

字体取决于客户端安装的字体。在服务器上安装字体没有用。

使用 CSS3（并非所有浏览器都支持），您可以使用 @font-face CSS property 来使用自定义字体。自定义字体的另一个解决方案是使用Google Webfonts。否则，请选择任何web safe font。

【参考方案3】：

如果您使用的字体可能无法被所有系统识别，则必须在 Web 服务器上包含匹配的字体文件。您可以使用 CSS 的 @font-face 属性注册这些字体。

尝试注册多种格式的字体（如 TrueType 和 OpenType）。提供一些广泛使用的后备字体也是一种很好的做法，例如 Times New Roman 或 Arial。