Прежде чем отмечать это как дубликат, пожалуйста, прочтите мои сомнения. Я тщательно искал в Интернете (особенно stackoverflow) и не смог развеять сомнения. На первый взгляд этот вопрос может показаться длинным, но он содержит важные вопросы, о которых хотят знать и другие.
Я пытаюсь получить немного более глубокие знания о пуленепробиваемом правиле @font-face
, и люди меня сбивают с толку. Пожалуйста, подскажите мне об этом, ребята. Итак, вот последний пуленепробиваемый код, предложенный Font-Spring (http://blog.fontspring.com/2011/02/fFurther-harpting-of-the-bulletproof-syntax/) вместе с проблемой режима совместимости IE9 решена:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Тот, который без исправления режима совместимости IE9, также от Font-Spring (http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/), выглядит нравится:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}
В настоящее время я читаю книгу Питера Гастона "The Book Of CSS3". Он следует пуленепробиваемому правилу с исправлением режима совместимости IE9, как указано в Font-Spring. Он говорит, что за IE9 Compat отвечает правило со строкой запроса ?
во втором свойстве src
. Исправление режима. Но font-spring содержит первое свойство src
, отвечающее за совместимость IE9. Исправление режима. Я не могу изучить этот синтаксис, не поняв его полностью.
Мои серьезные проблемы гораздо меньше. Прежде всего, я хочу знать, может ли только ?#iefix
предотвратить ошибку синтаксического анализа, или это может быть что-то вроде ?iefix
(без #
), или это может быть ?xyz
или ?#abc
. Надо ли писать именно ?#iefix
?
Во-вторых,
- Я не чувствую, как разбирается это
@font-face
правило, как IE8 решает, какое из свойствsrc
следует использовать дляeot
шрифта. И если IE9 не имеет проблем с синтаксическим анализом даже в режиме совместимости, как он решит, какой формат шрифта использовать? Будет ли IE9 в режиме совместимости нарушать URL-адрес шрифта строки запроса, а если нет, то почему? - Может ли кто-нибудь сказать мне, если я посмотрю на все указанное выше пуленепробиваемое правило, как IE8, IE9 в режиме совместимости, IE9 в нормальном режиме и другие браузеры будут его анализировать? Как браузер будет выбирать из нескольких шрифтов, какой из них использовать, если он поддерживает большинство из них. В каком порядке браузер просматривает
url
значений иsrc
свойства? - Это так, что одно свойство
src
без каких-либо значенийlocal()
иformat()
и с правильным форматомeot
будет принято IE8, и оно не перейдет к следующему свойствуsrc
, в котором определены другие форматы? Или он все равно перейдет к следующему свойствуsrc
и загрузит оттуда шрифты? - Если в следующем свойстве
src
будет строка запроса (?
), будет ли IE8 (также учитывается IE9 в режиме совместимости) загружать шрифтeot
два раза? И если не будет строки запроса, тогда он примет шрифтeot
из первого свойства и не сломается, или он сломается и не применит какой-либо настраиваемый шрифт даже из первого свойстваsrc
?
Кроме того, поддерживает ли IE9 в нормальном режиме формат eot
? Разве пуленепробиваемый синтаксис не будет работать, если я просто удалю все объявление строки запроса, например:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE6-IE8 as well as IE9 Compat. Mode */
src: url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Разве вышеупомянутое не будет работать во всех возможных случаях? IE6-8 будет иметь первый src
вместе с IE9 в режиме совместимости, а все остальные браузеры будут следовать остальным правилам.
Будет ли предложенное мной выше правило работать так же со значением local()
следующим образом:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE6-IE8 & IE9 Compat. Mode */
src: local('MyWebFont'), /* To fix IE6-IE8 and IE9 Compat. Mode */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
В IE8 или в режиме совместимости с IE9, значение local()
заставит их исчезнуть .. Будет ли IE9 в нормальном режиме использовать eot
или woff
из приведенного выше правила ?? Если он действительно использует eot
, можем ли мы немного изменить первое свойство src
следующим образом:
src: url('webfont.eot?#iefix') format('eot');
IE9 проигнорирует это свойство, поскольку оно содержит eot
, и перейдет к использованию woff
, я прав? Кроме того, если я снова внесу изменения в это правило следующим образом:
src: url('webfont.eot?#iefix') format('embedded-opentype');
Будет ли IE9 теперь использовать формат eot
или продолжать использовать woff
?
Это все, что я хочу знать, и да, я думаю, что на эти вопросы определенно нужен ответ.