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

图片。

我使用的浏览器版本。

解决方案

难以在Firefox中工作。字体重量300不工作在所有版本的时间。以下代码适用于我，并与所有浏览器兼容。

  font-family：Segoe UI Light ; 
 font-weight：300; 
  

请参阅
这是来自HTML5解决方案，它可能会帮助你，因为它也在Visual Studio ...
悬停在CSS的字体weight选项将告诉你的重量的单词（光，半）等
100：Thin
200：Extra Light（Ultra Light）
300：Light
400：Normal
500：Medium
600：Semi Bold（Demi Bold）
700： Bold
800：Extra Bold
希望它有帮助。

按照以下选项，添加font-weight，而不是使用semibold或semilight.Just使用'segoe ui'with font-weight。

  @ 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）; 
} 
  

I am using Segoe UI Light font in my website.

the css used is as follows.

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

But Google Chrome is not rendering this font properly. I am getting a bold font of Segoe UI Light in Chrome.

The Image.

The versions of browsers i'm using.

解决方案

Its difficult to get this working in Firefox. Font weight 300 doesnt work few time in all versions. The below code worked for me and compatible with all browsers.

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

See HereThis is from a HTML5 solution, but it might help you too, as it's also in Visual Studio...Hovering over the CSS font-weight options will tell you the weight in words (Light, Semi, etc.)100: Thin200: Extra Light (Ultra Light)300: Light400: Normal500: Medium600: Semi Bold (Demi Bold)700: Bold800: Extra BoldHope it helps.

Follow the below options and add font-weight instead of using semibold or semilight.Just use 'segoe ui' with combination of font-weight.

    @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 Light字体在Google Chrome中无法正常显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！