Question

所以我正在为我学校的Tech Club编写一个网站，并使用“@ font-face”规则来使用自定义字体。字体被使用，但由于某种原因，它是。。。真的很大胆。我想是黑暗的。关于发生了什么的任何想法？哦，我正在使用最新的Chrome浏览器。

代码：

@font-face {
            font-family: War Eagle;
            src: url("wareagle.ttf");
        }

        h1 {
            font-size: 50pt;
            font-family: War Eagle;
        }

Answer 1

这是您使用的字体吗？

War Eagle Font

注意wareagle.ttf是如何加粗的？您需要添加wareagle3D.ttf或ttf所需的任何样式：）

Answer 2

对于普通和粗体样式使用单独的@font-face，并为每个使用font-style和font-weight;专家推荐的嵌入字体的最佳方式。

@font-face {
    font-family: 'War Eagle';
    src: url('fonts/wareagle.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "War Eagle";
    src: url("fonts/wareagle_bold.ttf") format('truetype');
    font-weight: bold;
    font-style: normal;
}

Answer 3

默认情况下，h1个元素有font-weight: bold。由于您的代码未声明粗体字体，因此浏览器将应用算法（合成）粗体。因此，添加以下内容以便按原样使用声明的字体：

h1 { font-weight: normal }

您还应该使用FontSquirrel @font-face generator之类的工具，因为并非所有浏览器都支持TTF格式。

使用@ font-face，现在我的字体太粗了

3 个答案: