关于html：Segoe UI Light字体在Google Chrome中无法正确显示


Segoe UI Light Font Not displaying properly in Google Chrome

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

使用的css如下。

1
2
3
4
5
6
7
.divMainHeader
{
font-family:Segoe UI;
font-size:28pt;
font-weight:lighter;
width:100%
}

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

图片。
The Screen Shots joined of different browsers.

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

Internet Explorer : 9

Mozilla Firefox : 21

Google Chrome : 27

相关讨论

要使它在Firefox中运行很难。字体粗细300在所有版本中都很少起作用。以下代码对我有用，并且与所有浏览器兼容。

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

看这里
这来自HTML5解决方案，但它也可能对您有所帮助，因为它也在Visual Studio中...
将鼠标悬停在CSS字体粗细选项上将以字(轻，半等)的形式告诉您粗细。
100：薄
200：超光(超光)
300：轻
400：正常
500：中
600：半粗体(Demi Bold)
700：大胆
800：超粗体
希望能帮助到你。

请遵循以下选项并添加font-weight而不是使用semibold或semilight。只需将'segoe ui'与font-weight组合使用即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    @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");
}

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

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

1
2
3
4
5
6
.divMainHeader {
    font-family:"Segoe UI Light";
    font-size:28pt;
    font-weight:100;
    width:100%
}

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

不久前在另一篇文章中，建议使用与Microsoft在其网站上使用的类似的东西...

1
2
3
4
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字体。

可能由于各种原因：

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

    • 范例：http：//pastebin.com/FiGvAfTk

    您是否正确定义了字体？

    相关讨论

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    @font-face {
      font-family: 'Myfont';
      font-style: normal;
      font-weight: 200;
      src: local('Segoe UI Light'), local('SegoeUI-Light');

    }

    body{
        font-family: 'Myfont';
    }

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