Question

我正在尝试将一个名为'CorleoneDue'的字体显示在我正在处理的网站上。顺便说一句，这个字体是用于教父电影的。

我从这里下载了字体： http://www.dafont.com/corleone.font

我在这里将ttf文件转换为woff文件： https://andrewsun.com/projects/woffjs/woffer-woff-font-converter/

这是我未成功使用的css规则：

  @font-face {
  font-family: 'CorleoneDue';
  src: url('fonts/CorleoneDue.ttf') format('truetype');
  src: url('fonts/CorleoneDue.woff') format('woff');

}

任何人都可以帮我成功地在我的网站上呈现/显示此字体吗？

编辑：

我按照其中一位评论员（安德烈）的指示，我仍然没有运气。当前的CSS规则已更新为：

@font-face {
    font-family: CorleoneDue, sans-serif;
    src: url('corleonedue-webfont.eot');
    src: url('corleonedue-webfont.eot?#iefix') format('embedded-opentype'),
         url('corleonedue-webfont.woff2') format('woff2'),
         url('corleonedue-webfont.woff') format('woff'),
         url('corleonedue-webfont.ttf') format('truetype'),
         url('corleonedue-webfont.svg#corleone_dueregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

我想使用该字体的<h1>标签（和类）的CSS是：

.header-text {
    font-family: CorleoneDue;
    color: white;
    font-weight:bold;
    text-align: center;
}

Answer 1

将此CSS规则添加到要使用此字体显示的任何元素：

font-family: CorleoneDue, fantasy;

您可以将fantasy替换为其他通用字体系列（如果您认为您的字体最好被其他通用系列替换：serif，sans-serif，monospace，{{ 1}}）。在两种情况下，该字体将仅替换为该通用族的默认字体集：

浏览器/系统无法读取您提供的任何提供的字体文件。
无法加载字体文件（服务器故障等）。您的页面加载和字体文件的可能性很小（如果它们位于同一台服务器上） - 所以您不必担心这一点。

但是，关于点cursive，您应该记住，1.和.ttf格式不足以显示您的字体跨浏览器。也许您应该尝试更好的Web字体生成器，例如SquirrelFonts。我不赞同它，我只是把它命名为它的大。你应该做自己的研究，找到最适合你目标的研究。

如果您想知道系统如何呈现通用族（当字体文件没有加载时），这里有一个样本：

＆＃13;

.woff

＆＃13;

div { text-align: center; }
h1 {
  display: inline-block;
  width: 30%;
  min-height: 60px;
  margin: 0 auto;
}

h1:nth-child(1) { font-family: cursive; }
h1:nth-child(2) { font-family: sans-serif; }
h1:nth-child(3) { font-family: serif; }
h1:nth-child(4) { font-family: monospace; }
h1:nth-child(5) { font-family: fantasy; }

＆＃13;

如何让这个自定义字体工作？

1 个答案: