font Web di Google non rende correttamente in Safari

Question

sto usando google-webfonts nel mio sito,

body { 
    font-family: 'Roboto', sans-serif; 
} 

link il font nel layout di pagina utilizzando

<link href='http://fonts.googleapis.com/css?family=Lato|Roboto:400,300' rel='stylesheet' type='text/css'> 

Questo è un lavoro perfettamente in Chrome e Firefox . Ma in Safari, il font è più audace, cerco di correggere il peso del font, ma non funziona. come posso risolvere questo problema

Answer 1

Google Fonts fornisce tre metodi di importazione: <link>, @import o JavaScript). Indipendentemente dalla tua scelta, la risposta della richiesta è sempre la stessa, un elenco di caratteri tipografici.

Il descrittore "url" di ogni font-face fornisce i percorsi in cui il binario deve essere selezionato. In primo luogo, proverà i caratteri installati nel sistema operativo, se non riesce, recuperare in Google Fonts.

In qualche modo Safari non ottiene il font corretto per il "font-weight" desiderato se il font è nel sistema operativo. Nel mio caso, ho impostato "font-weight" su 100, quindi dovrebbe usare "Roboto-Thin", ma invece "Roboto-Light".

La soluzione più semplice è disinstallare il carattere e consentire a Google di fornirlo (l'ho fatto a Roboto). Se ciò non va bene per te, c'è un'altra opzione: non utilizzare i metodi di importazione descritti sopra e definire il carattere rivolto a te stesso.

Per questi, incollare l'URL fornito da Google nel browser, copiare il codice CSS fornito e incollare il proprio file CSS.

es .:

# Firefox. 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 100; 
    src: local('Roboto Thin'), 
     local('Roboto-Thin'), url(https://fonts.gstatic.com/s/roboto/v15/2tsd397wLxj96qwHyNIkxHYhjbSpvc47ee6xR_80Hnw.woff2) format('woff2'), 
     url(https://fonts.gstatic.com/s/roboto/v15/vzIUHo9z-oJ4WgkpPOtg13YhjbSpvc47ee6xR_80Hnw.woff) format('woff'); 
} 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Roboto Light'), 
     local('Roboto-Light'), 
     url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2'), 
     url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'); 
} 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Roboto'), 
     local('Roboto-Regular'), 
     url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2'), 
     url(https://fonts.gstatic.com/s/roboto/v15/CrYjSnGjrRCn0pd9VQsnFOvvDin1pK8aKteLpeZ5c0A.woff) format('woff'); 
} 


# Chrome. 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 100; 
    src: local('Roboto Thin'), 
     local('Roboto-Thin'), 
     url(https://fonts.gstatic.com/s/roboto/v15/2tsd397wLxj96qwHyNIkxHYhjbSpvc47ee6xR_80Hnw.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; 
} 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Roboto Light'), 
     local('Roboto-Light'), 
     url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.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; 
} 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Roboto'), 
     local('Roboto-Regular'), 
     url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.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; 
} 


# Safari. 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 100; 
    src: local('Roboto Thin'), 
     local('Roboto-Thin'), 
     url(https://fonts.gstatic.com/s/roboto/v15/Jzo62I39jc0gQRrbndN6nXYhjbSpvc47ee6xR_80Hnw.ttf) format('truetype'); 
} 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Roboto Light'), 
     local('Roboto-Light'), 
     url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfSZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype'); 
} 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Roboto'), 
     local('Roboto-Regular'), 
     url(https://fonts.gstatic.com/s/roboto/v15/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype'); 
} 


#IE. 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 400; 
    src: url(https://fonts.gstatic.com/s/roboto/v15/5YB-ifwqHP20Yn46l_BDhA.eot); 
} 


# Final: 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 100; 
    src: local('Roboto Thin'), 
     local('Roboto-Thin'), 
     url(https://fonts.gstatic.com/s/roboto/v15/2tsd397wLxj96qwHyNIkxHYhjbSpvc47ee6xR_80Hnw.woff2) format('woff2'), 
     url(https://fonts.gstatic.com/s/roboto/v15/vzIUHo9z-oJ4WgkpPOtg13YhjbSpvc47ee6xR_80Hnw.woff) format('woff'), 
     url(https://fonts.gstatic.com/s/roboto/v15/Jzo62I39jc0gQRrbndN6nXYhjbSpvc47ee6xR_80Hnw.ttf) format('truetype'); 
    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; 
} 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 300; 
    src: local('Roboto Light'), 
     local('Roboto-Light'), 
     url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2'), 
     url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'), 
     url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfSZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype'); 
    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; 
} 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Roboto'), 
     local('Roboto-Regular'), 
     url(https://fonts.gstatic.com/s/roboto/v15/oMMgfZMQthOryQo9n22dcuvvDin1pK8aKteLpeZ5c0A.woff2) format('woff2'), 
     url(https://fonts.gstatic.com/s/roboto/v15/CrYjSnGjrRCn0pd9VQsnFOvvDin1pK8aKteLpeZ5c0A.woff) format('woff'), 
     url(https://fonts.gstatic.com/s/roboto/v15/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype'), 
     url(https://fonts.gstatic.com/s/roboto/v15/5YB-ifwqHP20Yn46l_BDhA.eot); 
    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; 
} 

Answer 2

A quanto pare, Safari ha ancora per sostenere woff2. Supporta il woff. Quindi devi trovare gli url della versione woff e cambiare il formato in woff.

1. Visita: https://fonts.google.com/specimen/Roboto
2. , clicca sul link "Try it out in typecast" in basso a destra.
3. Fare clic su "Scarica HTML/CSS" nel pannello di sinistra.
4. Aprire index.html scaricato.
5. Copia il valore di link_element.href +=
6. Digita "http:" e incolla sopra nel browser.

Ad esempio: http://fonts.googleapis.com/css?family=Roboto:100italic,100,300italic,300,400italic,400,500italic,500,700italic,700,900italic,900

Queste sono le versioni WOFF.