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

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

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

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

Ответ 1

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

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

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

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

Ответ 2

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

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

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

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

Ответ 3

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

Ответ 4

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

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

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

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

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

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

Ответ 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 */
}