Как Google Web Fonts решает, какую версию шрифта предоставить моему браузеру?

Я читал, что «Google Web Fonts изо всех сил старается обслуживать правильные версии, но иногда между браузерами и операционными системами происходят радикальные изменения».

Я хотел бы использовать в своем CSS следующее: font-family: 'Open Sans', sans-serif;

Поэтому я включил это в верхнюю часть моей страницы:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700" />

Это все, что мне нужно сделать? Если это так, то как Google Web Fonts может определить правильную версию для моего браузера.

Кроме того, если я включу это, вероятно ли, что шрифт будет существовать в моем браузере. Могу ли я предположить, что у большинства пользователей уже будет копия шрифта?


html css webfonts google-webfonts
person Samantha J T Star    schedule 19.10.2013    source источник
comment
Что касается вашего первого вопроса - я не знаю подробностей, но Google получает строку USER_AGENT браузера при запросе CSS, поэтому они могут реагировать на это и предоставлять разные данные. Что касается вашего второго вопроса, смысл использования такого типа шрифтов заключается в том, что пользователю не нужно устанавливать локальную копию   -  person Pekka    schedule 19.10.2013

Ответы (1)


arrow_upward
4
arrow_downward

Google Web Fonts определяет браузер с помощью User Agent Sniffing. Вот несколько примеров.

Для Google Chrome он возвращает шрифт WOFF:

$ curl -A 'Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1667.0 Safari/537.36' http://fonts.googleapis.com/css?family=Open+Sans:400,700
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

Для Internet Explorer 10 возвращается шрифт EOT и WOFF:

$ curl -A 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)' http://fonts.googleapis.com/css?family=Open+Sans:400,700
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHZ2MAKAc2x4R1uOSeegc5U.eot);
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHZ2MAKAc2x4R1uOSeegc5U.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

Что касается вашего второго вопроса: веб-шрифты не устанавливаются на клиенте постоянно. Они живут только в кеше браузера. Если кеш очищается, шрифт загружается снова. Кроме того, если два веб-сайта используют один и тот же шрифт с разных URL-адресов, шрифт загружается дважды.

Но если в клиентской ОС установлен определенный шрифт для всей системы, он будет использовать версию ОС без загрузки. Вот для чего нужны local исходники в CSS.

person nwellnhof    schedule 19.10.2013
comment
Подожди, правда? Для IE он отображает eot версию шрифта?? Я сам собирал шрифты и конвертировал каждый файл один за другим! Столько потраченного времени... Спасибо за это! - person Jace Cotton; 19.10.2013
comment
Начиная с Chrome 36, предоставляется WOFF 2.0. При необходимости можно использовать другой браузер для загрузки CSS (или подделать User-Agent). Подробнее о поддержке WOFF 2.0. - person Dr1Ku; 18.11.2014