我正面臨 css 字體粗細問題。我有一個網站，我想在其中減少字體粗細，但即使是最輕的粗細，例如 100，它似乎也是固定的。
但我希望它看起來像
我使用的字體是 Merriweather-Sans
我的 css 檔案 1 包含與正文和標題相關的 css：
body {
font-size: $font-size-base;
line-height: line-height($font-size-base);
color: $color-black;
}
h1 {
font-size: $font-size-h1;
line-height: line-height($font-size-h1);
margin-bottom: $spacer;
font-weight: 100;
color: $color-slate;
}
h2 {
font-size: $font-size-h2;
line-height: line-height($font-size-h2);
font-weight: $font-weight-light;
color: $color-crimson;
margin-bottom: $spacer;
color: $color-slate;
text-transform: capitalize;
}
h3 {
font-size: $font-size-h3;
line-height: line-height($font-size-h3);
font-weight: $font-weight-normal;
margin-bottom: $spacer;
color: $color-slate;
}
h4 {
font-size: $font-size-h4;
line-height: line-height($font-size-h4);
margin-bottom: $spacer;
}
p {
font-size: $font-size-base;
line-height: line-height($font-size-base);
margin-bottom: $spacer;
color: $color-slate;
}
我的 css 檔案 2 包含上面 css 中宣告的變數：
/* === Typography === */
@import url('https://fonts.googleapis.com/css?family=Merriweather Sans');
$font-family-base: 'Merriweather Sans', sans-serif;
$font-size-base: 1rem;
$font-size-h1: $font-size-base * 3;
$font-size-h2: $font-size-base * 2;
$font-size-h3: $font-size-base * 1.75;
$font-size-h4: $font-size-base * 1.25;
$font-size-lead: $font-size-base * 1.25;
$font-size-small: $font-size-base * 0.875;
$font-weight-light: 200;
$font-weight-normal: 400;
$font-weight-bold: 700;
/* === Line height === */
$line-height-list: 1.5rem;
uj5u.com熱心網友回復：
這個匯入https://fonts.googleapis.com/css?family=Merriweather Sans只包含 font-weight 400，我想這就是原因。
并且此字體僅支持字體粗細 300-800 https://fonts.google.com/specimen/Merriweather Sans?query=Merriweather
你可以通過像這樣匯入來使用 font-weight 300-800
@import url('https://fonts.googleapis.com/css2?family=Merriweather Sans:wght@300;400;500;600;700;800&display=swap');
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/395755.html
上一篇：在HTML5進度元素中獲取間隙