Segoe UI Light Font 在 Google Chrome 中无法正确显示答案

【问题标题】：Segoe UI Light Font Not displaying properly in Google ChromeSegoe UI Light Font 在 Google Chrome 中无法正确显示
【发布时间】：2013-05-29 07:23:05
【问题描述】：

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

使用的css如下。

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

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

图像。

我正在使用的浏览器版本。

Internet Explorer：9

Mozilla Firefox：21

谷歌浏览器：27

【问题讨论】：

这有帮助吗？ stackoverflow.com/questions/2705791/…
@ralph 没用 :(

标签： html css google-chrome fonts

【解决方案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");
}

【讨论】：

【解决方案2】：

可能是因为各种原因：

可能您使用了错误的字体格式。 Chrome 支持 SVG、WOFF、TTF/OFT。
在定义 font-weight 时采用了错误的方法，导致浏览器错误地解释 font-weight 属性

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

您是否正确定义了字体？

【讨论】：

我使用的是TTF类型。我尝试了不同的方法来分配字体粗细。没有任何效果。
我使用的代码与我在问题中使用的代码相同。由于这个问题，我切换到压缩的roboto，它在所有浏览器中都可以正常工作。
我猜这是 chrome 特有的问题之一。我在 Open Sans 中遇到了类似的问题。谷歌浏览器错误跟踪器充满了类似的问题（谷歌，大量的）。他们或许应该为此做点什么。

【解决方案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 字体。

【讨论】：

【解决方案4】：

我自己也有类似的问题，浏览器只呈现标准 Segoe UI，而不是更轻的版本。如果您将字体系列更改为 Segoe UI Light，它应该可以满足您的需求。

请看下面修改后的代码：

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

【讨论】：

【解决方案5】：

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

}

body{
    font-family: 'Myfont'; 
}

这段代码解决了我和你一样的问题

【讨论】：