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：额外大胆 希望它有所帮助。

按照以下选项添加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");
}

Answer 2

可能是由于各种原因：

1. 也许您使用的是错误的字体格式。 Chrome支持SVG，WOFF，TTF / OFT。
2. 采用错误的方法来定义font-weight，导致浏览器错误地解释font-weight属性

示例：http://pastebin.com/FiGvAfTk

您是否正确定义了字体？

Answer 3

有趣......我几乎遇到了相反的问题......我可以让Segoe UI Light在Chrome和IE 10中正常呈现，但不能在FF 21中呈现。

在another post some time back中，建议使用类似于Microsoft在其网站上使用的内容......

h1, h2, h3, h4, h5, h6, h7 {
    font-family: "wf_SegoeUILight","wf_SegoeUI","Segoe UI Light","Segoe WP Light","Segoe UI","Segoe","Segoe WP","Tahoma","Verdana","Arial","sans-serif";
    font-weight: 300;
}

对于不支持font-weight + Segoe UI字体的浏览器，首先指定Segoe UI Light似乎可以保证它呈现较轻的字体。

然而，在FF 21中，无论我尝试什么，我仍然会看到正常的Segoe UI字体。 Firebug表示它正在从列表中选择Segoe UI字体。

Answer 4

我自己也有类似的问题，浏览器只渲染标准的Segoe UI而不是更轻的版本。如果你将font-family更改为Segoe UI Light，它应该做你想要的。

请参阅以下修订后的代码：

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

Answer 5

@font-face {
  font-family: 'Myfont';
  font-style: normal;
  font-weight: 200;
  src: local('Segoe UI Light'), local('SegoeUI-Light');

}

body{
    font-family: 'Myfont'; 
}

此代码修复了我的问题