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 я вижу правильные шрифты (я, локальный нет 'Open Sans' установлены; ОС - Windows 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», потому что прямо сейчас, если пользователь установил шрифт Open Sans в Win OS, браузер 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

Спасибо, Джейсон, вы сказали, что помогли (обновите мой пост новым .css, который работает) – maksim

ваш вопрос связан с woff2 формат шрифта не поддерживается IE.

собственный шрифт google, который предоставляет различные форматы шрифтов для разных браузеров.

если вы откроете https://fonts.googleapis.com/css?family=Open+Sans:400,600,300 с хромом, вы увидите woff2 формат шрифта, связанный обслуживаемым css. , если вы откроете https://fonts.googleapis.com/css?family=Open+Sans:400,600,300 с IE/Edge, вы увидите woff2 формат шрифта, связанный обслуживаемым css.

как решить

вы либо добавить формат Woff к вашему собственному открытому-Сансу.CSS или пусть Google сделать это для вас, связывающую Google 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

Вам нужно взять ссылку из комментария так что он может на самом деле захватить шрифт от Google .com ..

Изменить это ->

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

ответ

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