CSS @ font-face - що означає "src: local ('☺')"?

Я @font-faceвперше використовую і завантажив шрифт-комплект із fontsquirrel

Код, який вони рекомендують вставити в мій CSS:

@font-face {
    font-family: 'junctionregularRegular';
    src: url('Junction-webfont.eot');
    src: local('☺'), 
        url('Junction-webfont.woff') format('woff'), 
        url('Junction-webfont.ttf') format('truetype'), 
        url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}

Тепер, смайлик з обличчям змусив мене. Але також велика кількість URL-адрес у src - чому вони рекомендують так багато файлів і чи всі вони будуть відправлені до браузера, коли сторінка надається? Чи є якась шкода у видаленні всіх, крім .ttf?

якщо ви прочитаєте нотатки в генераторі шрифтів шрифтів шрифтів, ви побачите, що це був геть Пауль Ірланді.

Ось уривок з його публікації в блозі :

І .. щодо @font-faceсинтаксису

Зараз я рекомендую куленепробивний смайлик щодо оригінального куленепробивного синтаксису.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

З пуленебезпечного поста:

Так, це усміхнене обличчя. Специфікація OpenType вказує, що будь-які двобайтові символи Unicode взагалі не працюватимуть у шрифті на Mac, щоб зменшити ймовірність того, що хтось насправді випустив шрифт з таким ім'ям.

Є кілька причин, чому смайлик є кращим рішенням:

• Програмне забезпечення Webkit + Font Management може зіпсувати локальні посилання, як-от перетворення гліфів у A-блоки.

• В OS X програмне забезпечення управління шрифтом може змінювати налаштування системи для показу діалогового вікна при спробі доступу до локального шрифту (), доступного за межами бібліотеки / шрифтів. Детальніше про мій пуленепробивний пост. Також відомий шрифт Explorer X, що псує інші речі у Firefox.

• Хоча це малоймовірно, ви можете посилатися на локальний () шрифт, який є зовсім іншим, ніж те, що ви вважаєте, що це. (Повідомлення Typophile для різних однойменних шрифтів) По крайней мере, це ризик, і ви керуєте керуванням типом як браузеру, так і хост-машині. Цей ризик може не мати користі, щоб уникнути завантаження шрифту.

Це все досить гарні проблеми, але варто задуматися.

Локальний (☺︎) - це css-хак для відволікання IE6-8 від завантаження шрифтів, які він не може використовувати (він може використовувати лише шрифти у форматі EOT).

Пояснено: Останнє властивість src має перевагу в каскаді CSS, тобто CSS буде проаналізовано знизу вгору. Місцевий (☺︎) змусить IE пропустити src внизу, не витрачаючи на пропускну здатність, завантажуючи шрифти, які він не може використовувати, і скоріше перейде до прямого шрифту у .eotформаті (визначеному в рядку вище у вашому запитанні), який він буде використовувати. Смайлик лише для того, щоб не було локального шрифту з таким ім'ям (комбінація символів).

Детальніше читайте тут: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

@ font-face Остання властивість src має перевагу в каскаді CSS, тобто CSS буде проаналізовано знизу вгору.