веб-шрифты Google не правильно рендеринга в Safari

Я использую Google-WebFonts на моем сайте,веб-шрифты Google не правильно рендеринга в Safari

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

Ссылка шрифт в страницу макета с помощью

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

Это прекрасно работает в Chrome и Firefox , Но в Safari шрифт mor bold, я пытаюсь исправить шрифт, но не работал. как я могу решить эту проблему

источник

2015-02-14 shyama

Различные комбинации браузера и ОС визуализируют шрифты по-разному, ожидаются небольшие изменения. –

какая у вас версия сафари? –

Этот ответ сработал для меня: http://stackoverflow.com/a/33959265/1624933 см. Мой комментарий тоже – timhc22

Google Fonts предоставляет три способа импорта: <link>, @import или JavaScript). Независимо от вашего выбора, ответ запроса всегда один и тот же, список шрифтов.

Дескриптор «url» каждого шрифта предоставляет пути, по которым нужно выбрать двоичный файл. Во-первых, он попытается установить установленные шрифты в ОС, если не удается, выберите в Google Fonts.

Как-то Safari не получает нужный шрифт для желаемого «font-weight», если шрифт находится в ОС. В моем случае я установил «font-weight» равным 100, поэтому он должен использовать «Roboto-Thin», но вместо этого он получает «Roboto-Light».

Самое простое решение - удалить шрифт и предоставить Google его (я сделал это с Roboto). Если это не подходит для вас, есть еще один вариант: не используйте описанные выше методы импорта и сами определяйте шрифт.

Для этого вставьте URL-адрес, предоставленный Google в браузере, скопируйте предоставленный CSS-код и вставьте его в свой собственный файл CSS.

.: например

# 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; 
}

источник

2015-03-11 22:32:31

Это тоже не помогло. Safari 9 –

Видимо, Safari еще поддержать woff2. Он поддерживает woff. Таким образом, вам нужно найти URL-адрес версии woff и изменить формат на woff.

визит: https://fonts.google.com/specimen/Roboto
Нажмите «Попробовать в» напечатанный материал ссылку на нижнем правом.
Нажмите «Загрузить HTML/CSS» на левой панели.
Откройте загруженный index.html.
Скопируйте значение link_element.href +=
Введите «http:» и вставьте в свой браузер.

Например: http://fonts.googleapis.com/css?family=Roboto:100italic,100,300italic,300,400italic,400,500italic,500,700italic,700,900italic,900

Эти версии WOFF.

источник

2016-09-14 15:19:31 jay

Это не сработало для меня с Roboto Slab, Safari 9 –

веб-шрифты Google не правильно рендеринга в Safari

ответ

Смежные вопросы