Використовувати кілька користувацьких шрифтів за допомогою @ font-face?

Question 1

Я впевнений, що мені не вистачає чогось справді прямого. Використовував один спеціальний шрифт із нормальним шрифтом:

@font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

Все працює нормально, коли я його використовую, але якщо я хочу додати інший спеціальний шрифт, що мені робити? Я намагався відокремити комами наступний або додати цілий інший шрифт, але не можу змусити другий шрифт працювати.

Question 2

Ви просто додаєте ще одне @font-faceправило:

@font-face {
    font-family: CustomFont;
    src: url('CustomFont.ttf');
}

@font-face {
    font-family: CustomFont2;
    src: url('CustomFont2.ttf');
}

Якщо ваш другий шрифт все ще не працює, переконайтеся, що ви правильно написали його назву і назву файлу, кеші вашого браузера поводяться, ваша ОС не возиться з однойменним шрифтом тощо.

Question 3

Якщо у вас проблеми з роботою шрифту, у мене це теж було раніше, і проблема, яку я знайшов, стосувалася сімейства шрифтів: name. Це повинно відповідати тому, що назва шрифту була фактично дана.

Найпростіший спосіб виявити це - встановити шрифт і подивитися, яке відображуване ім’я дано.

Наприклад, я використовував Gill Sans в одному проекті, але власне шрифт називався Gill Sans MT. Інтервал та використання великих літер також були важливими для правильного вибору.

Сподіваюся, що це допомагає.

Question 4

Перевірте шрифти-білки . Вони мають веб-генератор шрифтів, який також виплюне відповідну таблицю стилів для вашого шрифту (шукайте "@ font-face kit"). Цю таблицю стилів можна включити у свій власний, а можна використовувати як шаблон.

Question 5

Я використовую цей метод у своєму CSS-файлі

@font-face {
  font-family: FontName1;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName1'), url('fontname1.ttf') format('truetype'); /* others */
}
@font-face {
  font-family: FontName2;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName2'), url('fontname2.ttf') format('truetype'); /* others */
}
@font-face {
  font-family: FontName3;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName3'), url('fontname3.ttf') format('truetype'); /* others */
}

Question 6

Ви можете використовувати декілька граней шрифтів досить легко. Нижче наведено приклад того, як я використовував його в минулому:

<!--[if (IE)]><!-->
    <style type="text/css" media="screen">
        @font-face {
            font-family: "Century Schoolbook";
            src: url(/fonts/century-schoolbook.eot);
        }
        @font-face {
            font-family: "Chalkduster";
            src: url(/fonts/chalkduster.eot);
        }
    </style>
<!--<![endif]-->
<!--[if !(IE)]><!-->
    <style type="text/css" media="screen">
        @font-face {
            font-family: "Century Schoolbook";
            src: url(/fonts/century-schoolbook.ttf);
        }
        @font-face {
            font-family: "Chalkduster";
            src: url(/fonts/chalkduster.ttf);
        }
    </style>
<!--<![endif]-->

Варто зазначити, що шрифти можуть бути забавними в різних браузерах. Шрифт face у попередніх браузерах працює, але вам потрібно використовувати eot-файли замість ttf.

Ось чому я включаю свої шрифти в заголовок файлу html, оскільки тоді я можу використовувати умовні теги IE, щоб відповідно використовувати файли eot або ttf.

Якщо для цього вам потрібно перетворити ttf на eot, існує чудовий веб-сайт, ви можете зробити це безкоштовно в Інтернеті, який можна знайти за адресою http://ttf2eot.sebastiankippe.com/ .

Сподіваюся, що це допомагає.