CSS - 'Open Sans' Schriftart - Hervorragende Bibliothek

Ich habe ein Problem in IE und Edge-Browsern mit der Verwendung von 'Open Sans' Schriftart, in lokalen CSS-Datei definiert.CSS - 'Open Sans' Schriftart

open-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>

In Chrome oder FF i siehe richtigen Schriften (localy ich habe nicht 'Open Sans' installiert; OS - Windows-10) ... in IE/Kanten - Die Schriften funktionieren nicht. Aber wenn ich meinen Link zu open-sans.css entferne und den Link zu fonts.googleapis.com verwende, ist alles in IE/Edge in Ordnung. Was ist der Grund? (meine open-sans.css ist eine vollständige Kopie von "https://fonts.googleapis.com/css?family=Open+Sans:400,600,300")

Wenn Sie fragen, warum ich lokale open-sans.css verwenden möchte? Ich möchte verschiedene Schriftfamilien für "Open Sans" definieren, denn wenn der Benutzer Open Sans unter Win OS installiert hat, zeigt der Chrome-Browser sie falsch an (IE/Edge/FF sind in Ordnung)

Open-sans.css, dass ich mit:

/* 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; 
}

Schriftart in Chrome (wenn ich meine lokalen Open-sans.css verwenden):

Schriftart in IE (wenn Ich verwende meine lokale open-sans.css):

GELÖST:

mit dem nächsten css, alles funktioniert:

@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'); 
}

Quelle

2016-04-16 maksim

Sie müssen "falsch" definieren, da es scheint, alle Browser tun etwas "falsch" und Sie sagen nicht genau was. –

Können Sie Ihren @ font-face-Code angeben? Verschiedene Browser verwenden unterschiedliche Schriftformate. Es gibt einige gute Informationen hier: http://stackoverflow.com/questions/30572159/what-font-format-should-i-use-for-my-site. Außerdem könnten Sie Ihre Version von "Open Sans" umbenennen, um Konflikte zu vermeiden. Wie "Open Sans Custom" – Jason

Vielen Dank Jason, Sie kommentiert geholfen (wird meinen Beitrag mit neuen .css aktualisieren, das funktioniert) – maksim

Ihr Problem ist aufgrund woff2 Schriftformat nicht von IE unterstützt.

google font eigenen css geben verschiedene font-formate zu verschiedenen browser.

Wenn Sie https://fonts.googleapis.com/css?family=Open+Sans:400,600,300 mit Chrom öffnen, sehen Sie woff2 Schriftformat, das durch das gediente css verbunden ist. Wenn Sie https://fonts.googleapis.com/css?family=Open+Sans:400,600,300 mit IE/Edge öffnen, sehen Sie woff2 Schriftformat, das durch das gediente css verbunden ist.

wie

Sie lösen entweder das woff Format auf Ihre eigene Open-sans hinzufügen.css oder lassen Sie es tun Google für Sie die Verknüpfung der google css

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

Quelle

2016-04-16 10:14:51 Giuseppe

benötigen Sie den Link aus einem Kommentar zu nehmen, damit es tatsächlich die Schriftart von Google greifen .com ..

ändern this ->

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

Um dies ->

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

Dadurch werden die Gewichte greifen Sie definiert ..

Quelle

2016-04-16 06:46:19 Jylaw38

CSS - 'Open Sans' Schriftart

Antwort

Verwandte Themen