html – Segoe UI Light字体在Google Chrome中无法正常显示

发布时间：2020-12-14 16:44:35 所属栏目：资源来源：网络整理

导读：我在我的网站上使用Segoe UI Light字体. 使用的css如下. .divMainHeader{font-family:Segoe UI;font-size:28pt;font-weight:lighter; width:100%} 但Google Chrome无法正确呈现此字体.我在Chrome中获得了大胆的Segoe UI Light字体. 图片. 我正在使用的浏览器

我在我的网站上使用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

解决方法

很难在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：额外大胆
希望能帮助到你.

按照以下选项添加font-weight而不是使用semibold或semilight.Just使用’segoe ui’结合font-weight.

@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");
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!