CSS3中的字体答案

【问题标题】：Font-face in CSS3CSS3中的字体
【发布时间】：2015-10-04 22:06:50
【问题描述】：

我决定更改页面的字体，并从互联网上下载另一个。我试过这种方式，但它不起作用。文件“font.ttf”与 html 文件位于同一文件夹中。

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

header {
      font-family: Test;
      width: 100%;
      margin: auto;
      height: 48px;
      background-color: white;
}

【问题讨论】：

查看 webdeveloper 工具中的控制台或网络选项卡。字体是否加载成功？
确保路径正确。 @font-face { 字体系列：测试； src: url(../font.ttf); }

标签： html css

【解决方案1】：

如果您下载的字体已保存在系统的主字体文件夹中，那么您应该像使用任何其他字体一样使用它。

例如

font-family='New Font';

应该没有区别:)

字体文件夹的目录；控制面板 > 外观和个性化 > 字体 > 添加字体

【讨论】：

【解决方案2】：

要将字体添加到您的网站，您需要的不仅仅是 font.ttf 文件。此外，从一开始就尽可能有条理，不要只是将所有内容都倾倒在一个层次上。后来，当添加更多东西时，您可能会变得一团糟，随着事情变得更加复杂，它会变得更加混乱。整齐地组织到文件夹中。

1- 您将需要网络字体扩展。意思是，使用在线生成器通过提交您的 .ttf 文件来生成网络字体（确保您遵循许可许可）。这些扩展适用于不同的浏览器。

2- 您需要为 webfonts 创建一个 .CSS 文件。这是一个示例的链接： [链接]How to embed fonts in CSS?

3- 您需要遵循获取字体的确切路径。

4- 打开 .ttf 文件时，请注意字体拼写。（这部分可能很棘手）

5- 您还需要一个 .htaccess 文件，该文件有助于将您的网络字体链接到您的网站。您可能会在本地设备浏览器上看到您想要的字体，但它可能无法在未安装该字体的其他设备上运行。

【讨论】：