Typeface.js：我如何知道要添加的字体的名称？

Question

我已经使用 Typeface.js 转换了一些字体，默认字体工作正常，即 Century Gothic。但是现在我正在尝试使用我上传的 Century Gothic Bold，但我不知道确切的名称是什么。我尝试了“Century Gothic Bold”，但没有奏效。你怎么知道叫什么名字？转换器在创建过程中不会告诉您或要求您指定这一点。是文件名吗？

我不会上传任何代码，因为这只是一个一般性问题。

附：我应该澄清一下，我知道我可以添加 font-weight:bold 但这将是普通的“Century Gothic”加粗而不是“Century Gothic Bold”字体，这是完全不同的东西。我已经试过了，它看起来很糟糕。

Answer 1

@Adamantus 虽然不是具体的技术回答，但不得不说：

我之前也使用过 Typeface.js。然而，一旦网络字体获得关注并出现网络字体服务，我就停止使用它。我松了一口气。

老实说，我认为按照今天的标准，从各个方面来说，使用 Typeface.js 是完全没有必要的：

1. 试图使其工作的开销太大。这就是你在这里发帖的原因。
2. 用 JavaScript 做一些可以很容易用 CSS 完成的事情是不正确的开发方法。
3. 如果您使用 Typeface.js 是因为您使用的是许可字体（不是字体），而 Century Gothic 不是免费字体。这意味着您仍然会非法使用字体，只是技术不同。

我的诚实建议是寻找一种类似于 Century Gothic 的网络字体，然后使用 @font-face 实现它。

这里有一个专门为此而设的论坛：https://stackoverflow.com/questions/19675667/alternative-google-web-font-for-century-gothic

在这里你可以找到一个@font-face Sass mixin，它可以使实现网络字体更加容易：https://gist.github.com/ricardozea/9029840

这是混合：

//@include fontFace(fontName, 'path/to/font'); » No need to specify the file extension in the "fontName" value

@mixin fontFace($font-family, $file-path, $weight:normal, $style:normal) {
    @font-face {
        font-family:$font-family;
        src:url('#{$file-path}.eot');
        src:url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
            url('#{$file-path}.woff') format('woff'),
            url('#{$file-path}.ttf') format('truetype');
        font-weight:$weight;
        font-style:$style;
    }
}

用法：

@include fontFace(muli, '../fonts/muli');

祝你好运。