Не могу понять правило CSS bulletproof @ font-face

Прежде чем отмечать это как дубликат, пожалуйста, прочтите мои сомнения. Я тщательно искал в Интернете (особенно 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?

Это все, что я хочу знать, и да, я думаю, что на эти вопросы определенно нужен ответ.


person GauravRockr    schedule 02.11.2015    source источник
comment
Мне очень хочется отредактировать ваш вопрос и добавить [необходима цитата}.   -  person Mr Lister    schedule 02.11.2015


Ответы (1)


@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 */
}

Это просто уловка для обхода различных несоответствий IE *, с первым src вы удовлетворяете IE9, поэтому, если у вашего зрителя есть этот браузер, он получает этот шрифт, второй src не перезаписывает первый, потому что IE9 не может проанализировать строку 'webfont.eot?#iefix'

О втором источнике правила: это "старый" пуленепробиваемый синтаксис, и вы уже знакомы с ним. Обратите внимание, что, как сказано в сообщении блога Fontspring об усиленном правиле, Microsoft исправила ошибку в IE9 при использовании режимов рендеринга IE7 и IE8, но на самом деле они не исправили IE7 и IE8, поэтому вам все еще нужен этот трюк для этих браузеров.

Разъяснение по поводу local(): это говорит браузеру использовать определенный локальный (то есть на компьютере зрителя страницы) доступный шрифт, если у вашего зрителя он не установлен, он не сможет увидеть правильный шрифт, для получения дополнительной информации вы можете проверить это: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/#smiley

person kaosmos    schedule 09.12.2015
comment
Прежде всего спасибо, что даже ответили на мой нелепый вопрос. Я все еще немного сомневаюсь, действительно ли нам нужна строка с '? #Iefix ...', coz 'Я так не думаю, поскольку IE9 в режиме совместимости берет первый src, поэтому IE6-IE8 ... не так ли? Первое свойство src не включает конструкции format () или local (), которые не распознаются IE6-IE8, поэтому одна эта строка должна работать в обоих случаях. Что ты говоришь? - person GauravRockr; 24.12.2015
comment
Добро пожаловать @GauravRockr Если вы используете IE9, второй src сам по себе не будет работать (с момента исправления IE6-IE8), поэтому вам нужен первый. Но на самом деле я думаю, что лучший ответ - - person kaosmos; 25.12.2015
comment
Извините, я опубликовал комментарий до того, как закончил его, и теперь я не могу его изменить, вот правильный: Добро пожаловать, @GauravRockr, если вы используете IE9, второй src сам по себе не будет работать (поскольку исправление IE6-IE8 не работает в IE9), поэтому вам понадобится и первый. Но первый работает только в IE9, поэтому вам нужны оба, чтобы удовлетворить каждый IE (конечно, если вам не нужно поддерживать устаревший IE, вы можете пропустить? #Iefix). В любом случае, лучший способ понять это - просто попробовать. Возьмите несколько виртуальных машин с разными версиями IE и посмотрите, как это работает :) - person kaosmos; 25.12.2015
comment
да, я знаю, что? iefix не работает в режиме совместимости IE9, но, поскольку первое свойство src: url('webfont.eot') не содержит нескольких шрифтов и конструкций local () и format (), не должно ли оно работать в одиночку и для IE6-8? - person GauravRockr; 25.12.2015
comment
Нет, на самом деле это не так. IE6-IE8 нуждается в исправлении (из-за ошибки оно не предназначено), в то время как IE9 этого не понимает, поэтому, если вы хотите поддерживать весь диапазон IE, вам нужны оба свойства src - person kaosmos; 26.12.2015