10

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

使用的CSS如下。

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

但是谷歌浏览器没有正确渲染这个字体。我在 Chrome 中获得了 Segoe UI Light 的粗体字体。

图片。 不同浏览器的屏幕截图。

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

互联网浏览器：9

火狐浏览器：21

谷歌浏览器：27

4

5 回答 5

3

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

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

See Here 这是来自 HTML5 解决方案，但它也可能对您有所帮助，因为它也在 Visual Studio 中...悬停在 CSS font-weight 选项上会告诉您字重（Light、Semi 等）100： Thin 200：Extra Light（超轻） 300：Light 400：Normal 500：Medium 600：Semi Bold（Demi Bold） 700：Bold 800：Extra Bold 希望对您有所帮助。

按照以下选项添加字体粗细，而不是使用半粗体或半轻。只需使用“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");
}
于 2013-11-13T21:48:46.653 回答
1

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

请参阅下面的修改后的代码：

.divMainHeader {
    font-family:"Segoe UI Light";
    font-size:28pt;
    font-weight:100; 
    width:100%
}
于 2013-07-31T15:23:21.520 回答
1

有趣...我遇到了几乎相反的问题...我可以让 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 字体。

于 2013-06-08T17:57:30.387 回答
1

可能是由于各种原因：

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

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

您是否正确定义了字体？

于 2013-06-03T10:35:12.387 回答
0 
@font-face {
  font-family: 'Myfont';
  font-style: normal;
  font-weight: 200;
  src: local('Segoe UI Light'), local('SegoeUI-Light');

}

body{
    font-family: 'Myfont'; 
}

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

于 2013-11-01T16:39:15.013 回答