html - 字体粗细值无法正常工作

Question

我曾尝试为文本小部件提供 font-weight 属性，但它无法正常工作，这将为值显示相同的粗体外观100,200,300,400 和 500 并对 600 产生很大影响。这是什么问题？我该如何解决？

.flip-menu-text {
    text-align: left;
    font-weight: 100;
    line-height: 1.125rem;
    padding: .5625rem 0;
    margin: 0;
    outline: 0;
    border: 0;
    font-size: 14px;
}

<span class="flip-menu-text">Widgets</span>

Answer 1

这与您提供的 CSS 无关，更多的是与相关字体(您未指定)有关。

取this font ， 例如。它有 400(正常)、600、700(粗体)、800 和 300 种字体粗细样式。

作为stated by CSS-Tricks :

In order to see any effect using values other than 400 or 700, the font being used must have built-in faces that match those specified weights.

简而言之，如果您对可用的 font-weight 不满意，请尝试使用不同的字体。