Использовать несколько пользовательских шрифтов, используя @ font-face? - PullRequest
Новая
       6

Использовать несколько пользовательских шрифтов, используя @ font-face?

59 голосов
/ 11 августа 2011

Я уверен, что упускаю что-то действительно прямое. Использовался один собственный шрифт с обычным шрифтом face: 

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

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

Ответы [ 5 ]

108 голосов
/ 11 августа 2011

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

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

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

Если ваш второй шрифт по-прежнему не работает, убедитесь, что вы правильно пишете его имя гарнитуры и имя файла, кэши браузера работают, ваша ОС не работает со шрифтом с тем же именем и т. Д. .

7 голосов
/ 11 августа 2011

Если у вас есть проблема с работающим шрифтом, то у меня это тоже было в прошлом, и я обнаружил проблему с font-family: name.Это должно совпадать с тем, какое имя шрифта было на самом деле дано.

Самый простой способ выяснить это - установить шрифт и посмотреть, какое имя отображается.

Например, я былиспользование Gill Sans в одном проекте, но фактический шрифт назывался Gill Sans MT.Интервал и капитализация были также важны, чтобы получить право.

Надеюсь, это поможет.

5 голосов
/ 11 августа 2011

Проверить fontsquirrel .У них есть веб-генератор шрифтов, который также выдаст подходящую таблицу стилей для вашего шрифта (ищите "@ font-face kit")Эта таблица стилей может быть включена в вашу собственную, или вы можете использовать ее в качестве шаблона.

3 голосов
/ 11 августа 2011

Я использую этот метод в моем файле 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 */
}
3 голосов
/ 11 августа 2011

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

<!--[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]-->

Стоит отметить, что шрифты могут быть смешными в разных браузерах. В предыдущих браузерах шрифт работает, но вместо ttf нужно использовать eot-файлы.

Именно поэтому я включаю свои шрифты в заголовок html-файла, поскольку затем я могу использовать условные теги IE для использования файлов eot или ttf соответственно.

Если вам нужно конвертировать ttf в eot для этой цели, есть замечательный сайт, вы можете сделать это бесплатно онлайн, который можно найти на http://ttf2eot.sebastiankippe.com/.

Надеюсь, это поможет.

...