爲什麼谷歌字體'Roboto'仍然看起來重量超過100？

<head> 
    <title>Privacy Policy</title> 
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 



<h2>Brief summary of our Privacy Policy</h2> 

    <div class="text"> 

     <p>We value your privacy.</p> 

      <h3>General</h3>

CSS圖片爲什麼谷歌字體'Roboto'仍然看起來重量超過100？

body 
{ 
    background-color: black; 
    font-family: 'Roboto',sans-serif; 
    color: white; 
} 

h1 { 
    color: #fffffe; 
    font-size: 20pt; 
    letter-spacing: 0.2pt; 
    font-weight: 400; 
} 

h2 { 
    color: #fffffe; 
    font-size: 40pt; 
    text-align: center; 
    font-weight: 100; 
}

第1部分是我的結果如下。
第二部分是我需要得到的地方。
第三部分來自谷歌字體。

來源

2017-02-22 Giedru

默認情況下，谷歌的Web字體只能裝載重量400

你需要一個冒號後追加它們在URL中指定所需的其他權重。

所以對於你的情況的網址應爲：

<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">

來源：https://developers.google.com/fonts/docs/getting_started

來源

2017-02-22 16:53:10 Yousphere

您需要選擇100字體粗細。

h2 { 
 
    color: #fffffe; 
 
    font-size: 40pt; 
 
    text-align: center; 
 
    font-weight: 100; 
 
} 
 

 
h1 { 
 
    color: #fffffe; 
 
    font-size: 20pt; 
 
    letter-spacing: 0.2pt; 
 
    font-weight: 400; 
 
} 
 

 
body { 
 
    background-color: black; 
 
    font-family: 'Roboto', sans-serif; 
 
    color: white; 
 
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet"> 
 
<h1>this is an h1</h1> 
 
<h2>Brief summary of our Privacy Policy</h2>

來源

2017-02-22 16:50:24

時間學習有關字體和CSS是如何協同工作的事情。

單個字體文件（所以，在現代計算機這是個人ttf和otf文件，網頁還包括woff和woff2文件）編碼單重量。像「Roboto-Regular」這樣的字體只包含一個字形的重量，所以如果CSS只加載該字體，你可以根據需要更改font-weight，但它什麼也不做，因爲你還沒有告訴CSS引擎什麼去做。它只是繼續使用相同的字體。

相反，您需要告訴CSS引擎您需要多個不同的字體以用於不同的權重。

@font-face { 
    font-family: Roboto; 
    font-weight: normal; 
    font-style: normal; 
    src: url(roboto-regular.woff) format('WOFF') 
} 

@font-face { 
    font-family: Roboto; 
    font-weight: 300; 
    font-style: normal; 
    src: url(roboto-light.woff) format('WOFF') 
} 

@font-face { 
    font-family: Roboto; 
    font-weight: 200; 
    font-style: normal; 
    src: url(roboto-thin.woff) format('WOFF') 
} 

@font-face { 
    font-family: Roboto; 
    font-weight: 100; 
    font-style: normal; 
    src: url(roboto-ultra-thin.woff) format('WOFF') 
} 

etc.

正因爲如此，你的瀏覽器的CSS引擎現在知道：如果你要求不同的權重（如其他答案提到），但真正的情況是，谷歌的字體生成CSS這樣的谷歌字體爲您完成此那爲什麼你說font-weight: 100，它只需要robot-ultra-thin字體而不是常規字體。

「但是，爲什麼這個工作適用於像Times這樣的東西？」

好問題：因爲系統字體已經是不同字體文件的大集合。請注意，當您使用CSS時，您需要一個font-family。「家庭」部分很重要：你不是要求單個字體，而是要求一個完整的字體系列，默認情況下，你要求的風格是：普通，重量：普通版。您的操作系統完全能夠找到正確的單個字體文件，以便爲您的瀏覽器的CSS引擎提供此目的，所以當您爲font-family: Times您的瀏覽器實際上正在加載Times-regular.ttf或類似的東西。

但是，如果一個字體家族沒有CSS權重那麼多的重量，那麼沒有一個說「weight：100」的數量會讓字體家族沒有超薄的字體超薄。如果字體資源不存在（或者因爲它實際上不存在，或者因爲您忘記了CSS，則需要加載一個重量爲100的字體文件），結果是未定義的，儘管可以預測（瀏覽器將最終結束使用最接近的匹配字體它確實知道），你不應該使用未定義行爲的CSS。你是掛鉤，以確保它的定義=）

來源

2017-02-22 21:21:23

爲什麼谷歌字體'Roboto'仍然看起來重量超過100？

回答

相關問題