Использовать несколько пользовательских шрифтов с помощью @font-face?

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

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

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

5 ответов


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

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

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

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


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

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

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

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


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


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

<!--[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/.

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


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