CSS - 'Open Sans'字體

我在IE和Edge瀏覽器中使用'Open Sans'字體，在本地.css文件中定義了一個問題。CSS - 'Open Sans'字體

開sans.html：

<html> 

<head> 
    <meta charset="utf-8"> 
    <!--link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'--> 
    <link href='open-sans.css' rel='stylesheet' type='text/css'> 
    <style type="text/css"> 
     * { 
      font-family: 'Open Sans'; 
      font-style: normal; 
      font-size: 13px; 
     } 
     .light { 
      font-weight: 300; 
     } 
     .regular { 
      font-weight: 400; 
     } 
     .semibold { 
      font-weight: 600; 
     } 
    </style> 
</head> 

<body> 

<p class="light">Lorem ipsum dolor sit amet...</p> 

<p class="regular">Lorem ipsum dolor sit amet...</p> 

<p class="semibold">Lorem ipsum dolor sit amet...</p> 

</body> 

</html>

在Chrome或FF我見右圖字體（localy我沒有 '打開三世' 安裝;操作系統 - 視窗10）...在IE /邊緣 - 字體不起作用。但是，如果我刪除我的鏈接到open-sans.css並將使用到fonts.googleapis.com的鏈接 - 在IE/Edge中一切都很好。什麼原因？（我的open-sans.css是「https://fonts.googleapis.com/css?family=Open+Sans:400,600,300」的完整副本）

如果你問我爲什麼要使用本地open-sans.css？我想使用爲'Open Sans'定義的不同字體系列，因爲現在如果用戶在Win OS中安裝了'Open Sans'字體 - Chrome瀏覽器顯示它們是錯誤的（IE/Edge/FF很好）

開放式sans.css，我使用：

/* cyrillic-ext */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTa-j2U0lmluP9RWlSytm3ho.woff2) format('woff2'); 
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 
} 
/* cyrillic */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTZX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2'); 
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 
} 
/* greek-ext */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRWV49_lSm1NYrwo-zkhivY.woff2) format('woff2'); 
    unicode-range: U+1F00-1FFF; 
} 
/* greek */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTaaRobkAwv3vxw3jMhVENGA.woff2) format('woff2'); 
    unicode-range: U+0370-03FF; 
} 
/* vietnamese */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTf8zf_FOSsgRmwsS7Aa9k2w.woff2) format('woff2'); 
    unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB; 
} 
/* latin-ext */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTT0LW-43aMEzIO6XUTLjad8.woff2) format('woff2'); 
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 
} 
/* latin */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
} 
/* cyrillic-ext */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); 
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 
} 
/* cyrillic */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); 
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 
} 
/* greek-ext */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); 
    unicode-range: U+1F00-1FFF; 
} 
/* greek */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); 
    unicode-range: U+0370-03FF; 
} 
/* vietnamese */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); 
    unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB; 
} 
/* latin-ext */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); 
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 
} 
/* latin */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
} 
/* cyrillic-ext */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 600; 
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSq-j2U0lmluP9RWlSytm3ho.woff2) format('woff2'); 
    unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F; 
} 
/* cyrillic */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 600; 
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSpX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2'); 
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 
} 
/* greek-ext */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 600; 
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShWV49_lSm1NYrwo-zkhivY.woff2) format('woff2'); 
    unicode-range: U+1F00-1FFF; 
} 
/* greek */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 600; 
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSqaRobkAwv3vxw3jMhVENGA.woff2) format('woff2'); 
    unicode-range: U+0370-03FF; 
} 
/* vietnamese */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 600; 
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSv8zf_FOSsgRmwsS7Aa9k2w.woff2) format('woff2'); 
    unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB; 
} 
/* latin-ext */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 600; 
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSj0LW-43aMEzIO6XUTLjad8.woff2) format('woff2'); 
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 
} 
/* latin */ 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 600; 
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
}

字體在Chrome（如果我用我的地方開sans.css）：

字體在IE（如我用我的本地open-sans.css）：

解決：

與未來的CSS，所有的工作：

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff'); 
} 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); 
} 
@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 600; 
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff'); 
}

來源

2016-04-16 maksim

你必須定義「錯誤的」，因爲它似乎所有的瀏覽器都在做什麼「錯誤」的，你沒有說什麼。 –

你能提供你的@ font-face代碼嗎？不同的瀏覽器使用不同的字體格式。這裏有一些很好的信息：http://stackoverflow.com/questions/30572159/what-font-format-should-i-use-for-my-site。另外，您可能會考慮重命名您的「Open Sans」版本以避免衝突。像「Open Sans Custom」 – Jason

謝謝Jason，你的評論幫助過（將用新的.css更新我的文章，這是工作） – maksim

您的問題是由於不支持IE woff2字體格式。

谷歌字體自己的CSS會給不同的瀏覽器不同的字體格式。

如果你打開https://fonts.googleapis.com/css?family=Open+Sans:400,600,300與鉻你會看到woff2由服務的CSS鏈接的字體格式。如果你用IE/Edge打開https://fonts.googleapis.com/css?family=Open+Sans:400,600,300，你會看到woff2字體格式被服務的CSS鏈接。

如何解決

你要麼WOFF格式添加到您自己的開放的SAN。CSS或讓谷歌爲你做鏈接谷歌的CSS

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300" rel="stylesheet" type="text/css">

來源

2016-04-16 10:14:51 Giuseppe

你需要採取的鏈接進行評論，因此它實際上可以抓住從谷歌的字體...

更換此產品 - >

<!--link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'-->

爲了這個 - >

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300" rel="stylesheet" type="text/css">

這會搶你所定義的權重..

來源

2016-04-16 06:46:19 Jylaw38

CSS - 'Open Sans'字體

回答

相關問題