Html Segoe UI Light字体在Google Chrome中未正确显示

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

谷歌浏览器：27

---

可能是由于各种原因：

也许您使用了错误的字体格式。Chrome支持SVG、WOFF、TTF/OFT

使用错误的方法定义字体权重，这会导致浏览器错误地解释字体权重属性

样本：

---

您正确定义字体了吗？

很有趣。。。我几乎遇到了相反的问题。。。我可以让Segoe UI Light在Chrome和IE 10中正确渲染，但在FF 21中不行

在年，有人建议使用类似于微软在他们网站上使用的东西

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字体。

我自己也有类似的问题，浏览器只呈现标准的Segoe UI，而不是较轻的版本。如果您将字体系列更改为Segoe UI Light，它将执行您想要的操作

请参阅下面的修订代码：

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

---

这段代码修复了我和你一样的问题

在Firefox中很难实现这一点。字体权重300在所有版本中都不起作用。下面的代码适用于我，并且与所有浏览器兼容

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

看 这是一个HTML5解决方案，但它也可能对您有所帮助，因为它也在Visual Studio中。。。 将鼠标悬停在CSS字体权重选项上，将以文字（轻、半等）显示权重 100:瘦 200：超轻（超轻） 300：轻 400：正常 500：中等 600：半加粗（半加粗） 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");
}

---

这有用吗@拉尔夫，那没用：（我使用的是TTF类型。我尝试了不同的方法来分配字体权重。没有任何效果。我使用的代码与我在问题中使用的代码相同。由于这个问题，我切换到roboto Condent，它在所有浏览器中都能正常工作。我想这是chrome特有的问题之一。我在Open SAN.Googl中遇到了类似的问题e Chrome bug tracker也有类似的问题（谷歌的问题很多），他们可能应该对此做些什么。

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