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

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

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

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

5 56
css css3 fonts font-face

5 ответов:

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

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

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

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

99

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

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

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

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

7

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

5

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

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

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

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

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

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

3

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