@font-face - 對一種字體使用多個文件

Question

似乎這個問題已經被問過很多次了（比如這里）。 但是我的問題似乎沒有通過提供的答案解決。

我正在嘗試將多個文件用於單個字體。 每個文件都有不同的樣式 - 斜體、粗體。 我嘗試了以下方法：

@font-face {
    font-family: matrix;
    src: url('../fonts/chris-simpkins_hack/Hack-Regular.ttf');
}
@font-face {
    font-family: matrix;
    font-weight: bold;
    src: url('../fonts/chris-simpkins_hack/Hack-Bold.ttf');
}

我的 HTML 包含以下內容：

<h1>Some Text</h1>
<p><b>Some more text that is bold!</b></p>

出乎意料的是，頁面上輸出的所有文本都使用了“...bold.tff”文件。 為什么是這樣？

過去我能夠輕松快速地實現這一目標，但不確定這次有何不同。

Answer 1

默認情況下，h1 使用粗體文本。 有關詳細信息，請參閱W3School 。

只需添加h1{ font-weight: normal;}來重置它。

如果你不喜歡瀏覽器的默認 css，你可以使用一些 reset.css 或normalize.css 。

但是， normalize.css 也將 h1 視為粗體文本。

Answer 2

使用字體創建不同的類並將這些類分配給預期的標簽

@font-face {
    font-family: matrix;
    src: url('../fonts/chris-simpkins_hack/Hack-Regular.ttf');
}


.myh1 {
  font-family : matrix;
  font-weight : 400;
}
.myp {
  font-family: matrix;
  font-weight:700;
}

例子

<h1 class='myh1'>Some Text</h1>
<p class='myp' >Some more text that is bold!</p>

Answer 3

也許您必須使用<em></em>標簽進行樣式設置，因為 HTML4 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b 中已棄用

或者您嘗試更改 font-weight: bold; 字體粗細：700； 並添加此樣式

b { font-weight: 700; }

Answer 4

嘗試這個：

@font-face { font-family: 'BrushScriptStdMedium';
src: url('brushscriptstd.eot');
src: local('Brush Script Std'), local('BrushScriptStd'), url('brushscriptstd.woff') 
format('woff'), url('brushscriptstd.ttf') format('truetype');}
.classname{ font:21px bold italic Arial;}