在 CSS 中使用自定义 (ttf) 字体

Posted 2023-03-15

【中文标题】在 CSS 中使用自定义 (ttf) 字体

【英文标题】：Using a custom (ttf) font in CSS

【发布时间】：2011-11-22 16:06:35

【问题描述】：

我有一台 mac，并安装了一种名为“7 Segment”的字体（它显示在字体册中）。当我使用font-family: "7 Segment"; 时，我得到的是 Helvetica（或类似的）而不是浏览器的默认字体，但它仍然没有显示正确的字体。该页面只需要在这台计算机上显示。我将如何使用此页面上的字体？谢谢。

【问题讨论】：

您是否 100% 肯定该字体已注册为系统字体？许多字体应用程序并不总是这样做，因为注册字体过多会导致性能下降。

【参考方案1】：

您需要使用 css-property font-face 来声明您的字体。看看这个花哨的网站：http://www.font-face.com/

例子：

@font-face 
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url(MgOpenModernaBold.ttf);
  font-weight: bold;

另见：MDN @font-face

【讨论】：

在这种情况下不是：The page only needs to be shown on this computer. 这在不使用 font-face 的情况下是可能的

Stil... 为什么使用正确的 css 方式会不好？不管是本地的还是非本地的，这就是它的完成方式。

我删除了反对票，因为它最终可能确实是最好的解决方法。不过，没有它应该是可能的

【参考方案2】：

这不是系统字体。其他系统不支持此字体。你可以使用font-face，从Site或this转换字体

【讨论】：

阅读问题。 The page only needs to be shown on this computer.

我认为下载的字体有问题。我使用这个字体系列得到了正确的字体：“7 Segment”； .但我使用的是窗户。你能再下载一次并安装。检查上图

@Sanooj font-face 仍处于预发布阶段。

@Sanooj 感谢您的想法