Порядок обработки @font-face

[Ryv]

Привет, камрады.

 

Подскажите пожалуйста с тем, с чем Гугл мне не помог. Что происходит при обработке броузером следующих строк кода:

 

@font-face {

font-family: 'myriad pro';

src: local local('Myriad Pro Regular');

src: url('../css/fonts/myriad/myriadpro-regular.eot?') format('embedded-opentype');

src: url('../css/fonts/myriad/myriadpro-regular.woff') format('woff');

}

 

1) а) Броузер подгружает все шрифты и использует только понятный ему

    б) Броузер подгружает только шрифт понятного ему формата

    в) Что-то еще...?!

 

2) Правило проверки присутствия шрифта в системе осуществляется первым или последним? Что-то я запутался c этим вашим CSS, может надо наоборот в конец кода поставить строчку проверки, не?

 

Спасибо!

[Sensei]

Браузер загрузит только один шрифтовой файл.

вот почитайте, там и про «local» написано.

[Ryv]

Благодарю за ответ. Я читал эту статью, как впрочем и многое иное в выдаче Гугла. Меня смущает все-таки вопрос порядка обработки этих инструкций. Ведь у нас, как известно, CSS обрабатывается как бы "с конца"...где правильно расположить инструкцию local, либо это не имеет значения? Вы уверены про загрузку броузером только одного шрифта? Я просто столкнулся с необходимостью подключения шрифтов, в Google Fonts таких нету, приходится все грузить со своего сервера, и, если eof и woff имеют еще терпимый размер, то svg - 400 кбайт и хоть вешайся, а кросс-броузерность весьма важна для меня в данной ситуации.

[Sensei]

Вы уверены про загрузку броузером только одного шрифта?

Да, уверен.

 

где правильно расположить инструкцию local

 

Например

@font-face {	font-family: 'Gentium';	src: url('Gentium.eot');	src: local(Gentium Bold),    /* full font name */	     local(Gentium-Bold),    /* Postscript name */             url('Gentium.eot') format('embedded-opentype'),	     url('Gentium.woff') format('woff'),	     url('Gentium.ttf') format('truetype'),             url('Gentium.svg') format('svg');	font-weight: normal;	font-style: normal;}

Как видите, «local» прописан в самом начале свойства.

 

svg - 400 кбайт и хоть вешайся

Вероятность загрузки svg невелика. Потому как браузеры поддерживающие этот формат загрузят либо «woff» если это десктоп, либо «ttf» если это мобильные браузеры.