Google Webfont與本地字體沖突

Question

我使用google-webfonts有一個非常糟糕的沖突。 好的，這里是代碼：

這是頭腦：

<link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>

這是在css文件中：

body {
font-family: 'Oswald', sans-serif;
font-weight: 700; }

“ Oswald ”是3種字體的一種字體：

• 書（300）
• 正常（400）
• 粗體（700）

正如你所看到的......我只加載了粗體（700）。 （你可以在查詢中看到它）它可以工作到這里但是......

問題是：

我的計算機上安裝了3種字體（300,400,700）的桌面版本，只要這些字體被激活......瀏覽器在我的html文檔中顯示錯誤的字體粗細（400）。

好。 問題是在我的CSS中'Oswald'采用的是localfont，而不是webfont。 但當地字體“Oswald”是“Oswald normal”。 我不知道谷歌為什么稱它為'Oswald'而不是'Oswald Bold'。 所以我不知道如何解決這個問題。

我不希望CSS指向本地字體..我希望它始終顯示webfont ...因為正確的字體 - 重量！

你有什么想法？ 請？

可以重命名webfont-call？

Answer 1

您可以編輯CSS @font-face規則以滿足您的需求，而不只是從Google加載自動生成的規則。 基本上問題是他們的規則更喜歡本地版本（ src: local('Oswald Bold'), local('Oswald-Bold'), ... ）。 糾正后的版本看起來像：

@font-face {
  font-family: 'WebOswald';
  font-style: normal;
  font-weight: 700;
  src: url(https://themes.googleusercontent.com/static/fonts/oswald/v5/bH7276GfdCjMjApa_dkG6T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

只需手動將其添加到CSS中，並使用font-family: 'WebOswald'; 當你想使用谷歌的Web版本的字體。

我希望有所幫助！