html - Segoe UI Light 字体在 Google Chrome 中无法正确显示

Question

我在我的网站上使用 Segoe UI Light 字体。

使用的css如下。

.divMainHeader
{
font-family:Segoe UI;
font-size:28pt;
font-weight:lighter; 
width:100%
}

但 Google Chrome 浏览器无法正确呈现此字体。我在 Chrome 中获得了 Segoe UI Light 的粗体字体。

图像。

我使用的浏览器版本。

Internet Explorer : 9

Mozilla Firefox : 21

Google Chrome : 27

Answer 1

很难让它在 Firefox 中工作。字体粗细 300 在所有版本中都不起作用。下面的代码对我有用并且兼容所有浏览器。

 font-family: "Segoe UI Light","Segoe UI";
 font-weight: 300;

参见 Here这是来自 HTML5 解决方案，但它也可能对您有所帮助，因为它也在 Visual Studio 中......将鼠标悬停在 CSS 字体粗细选项上会告诉您字重(Light、Semi 等)100:薄200:超轻(超轻)300:光400:正常500:中等600:半粗体(Demi Bold)700:粗体800:超粗体希望对您有所帮助。

按照以下选项添加字体粗细，而不是使用半粗体或半浅色。只需使用“segoe ui”和字体粗细的组合。

    @font-face {
    font-family: "Segoe UI";
    font-weight: 200;
    src: local("Segoe UI Light");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 300;
    src: local("Segoe UI Semilight");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 400;
    src: local("Segoe UI");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 600;
    src: local("Segoe UI Semibold");
}
@font-face {
    font-family: "Segoe UI";
    font-weight: 700;
    src: local("Segoe UI Bold");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 400;
    src: local("Segoe UI Italic");
}
@font-face {
    font-family: "Segoe UI";
    font-style: italic;
    font-weight: 700;
    src: local("Segoe UI Bold Italic");
}