Segoe UI Light字體無法在Google Chrome中正確顯示

Question

我在網站上使用Segoe UI Light字體。

使用的css如下。

.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

谷歌瀏覽器：27

Answer 1

要使它在Firefox中運行很難。 字體粗細300在所有版本中都很少起作用。 以下代碼對我有用，並且與所有瀏覽器兼容。

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

請參見此處，這來自HTML5解決方案，但也可能對您有所幫助，因為它也在Visual Studio中...將鼠標懸停在CSS字體粗細選項上將告訴您字粗（輕，半等）100：薄200：超輕（超光）300：輕400：普通500：中600：半粗體（半粗體）700：粗體800：粗體希望對您有所幫助。

請遵循以下選項並添加font-weight而不是使用semibold或semilight。只需將'segoe ui'與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");
}

Answer 2

可能由於多種原因：

1. 也許您使用了錯誤的字體格式。 Chrome支持SVG，WOFF，TTF / OFT。
2. 定義字體粗細使用了錯誤的方法，導致瀏覽器錯誤地解釋了font-weight屬性

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

您是否正確定義了字體？

Answer 3

有趣的是……我幾乎遇到了相反的問題……我可以讓Segoe UI Light在Chrome和IE 10中正確渲染，但在FF 21中卻不能。

在前段時間的另一篇文章中 ，建議使用與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字體。

Answer 4

我自己也遇到類似的問題，瀏覽器僅呈現標准的Segoe UI，而不是較淺的版本。 如果將字體系列更改為Segoe UI Light，則它應該執行您想要的操作。

請參見下面的修訂代碼：

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

Answer 5

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

}

body{
    font-family: 'Myfont'; 
}

這段代碼解決了我像你一樣的問題