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的粗体字体。
图片。
我正在使用的浏览器版本。
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字体。
可能由于各种原因:
范例: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'; } |
这段代码解决了我像你一样的问题