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

【问题标题】：Used @font-face, and now my font is too bold使用@font-face，现在我的字体太粗了
【发布时间】：2014-10-03 01:40:39
【问题描述】：

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

代码：

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

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

【问题讨论】：

当使用font-size时，你应该使用px而不是pt
你也可以使用 em。 em 是浏览器值。默认情况下，所有浏览器的字体大小设置为 16PX（大约），所以如果你定义 1em 它将是 16 px。

标签： html css fonts font-face

【解决方案1】：

这是你使用的字体吗？

War Eagle Font

注意wareagle.ttf 是如何加粗的？您需要添加wareagle3D.ttf 或ttf 任何您想要的样式:)

【讨论】：

【解决方案2】：

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

h1 { font-weight: normal }

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

【讨论】：

【解决方案3】：

正常和粗体使用单独的@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;
}

【讨论】：

src 设置是相同的，因此您需要将相同的字体文件声明为普通字体和粗体。
现在答案是相关的如果字体有粗体并且你希望使用它。
@JukkaK.Korpela 谢谢，这是因为你的建议 :)