Как использовать шрифт-шрифт с шрифтами-шрифтами?

У меня есть два файла шрифтов: FONT-light и FONT-bold. Оба из набора @font-face, поэтому каждая версия имеет 5 файлов шрифтов (OGV, TTF, WOFF, EOT).

Чтобы перейти от легкой версии к полужирной версии, я должен использовать font-family: FONT-light;, а затем font-family: FONT-bold;. Я хочу использовать font-weight: light; и font-weight: bold; вместо этого, потому что мне это нужно для переходов CSS3. Как мне это достичь?

ОТВЕТЫ

Ответ 1

@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'DroidSerif';
    src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

Из учебника: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

Ответ 2

Использовать свойства font-weight и font-style для встроенных шрифтов (@font-face) не так просто. Есть несколько вещей, о которых вам нужно позаботиться.

1 - @font-face Синтаксис:

Синтаксис очень важен для использования шрифта во всех браузерах. Пол Ирриш со многими ресурсами написал "Пуленепробиваемый синтаксис", как показано выше, который был улучшен в несколько раз:

@font-face {
  font-family: 'FONT-NAME';
  src: url('FONT-NAME.eot?') format('eot'), url('FONT-NAME.woff') format('woff'),     url('FONT-NAME.ttf') format('truetype');
}

Эта версия (http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ ищите "Синтаксис Fontspring @font-face") является самой последней и работает с IE6, iOS, Android. Важно посмотреть на ссылку, чтобы понять, почему она должна быть написана таким образом.

2 - свойства шрифта, такие как font-weight и font-style

Если вы хотите, возможно применить font-weight и font-style к декларации @font-face, чтобы использовать варианты одного и того же шрифта, но вы должны быть конкретными и точными в отношении этих характеристик. Есть несколько способов сделать это.

2.1 - Использование одного семейства шрифтов для каждого варианта

Используя "Пуленепробиваемый синтаксис", предположим, что вы хотите загрузить варианты "Обычный", "Полужирный" и "Курсив" у нас есть:

@font-face {
  font-family: 'FONT-NAME-normal';
  src: url('FONT-NAME-normal.eot?') format('eot'), url('FONT-NAME-normal.woff') format('woff'), url('FONT-NAME-normal.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FONT-NAME-bold';
  src: url('FONT-NAME-bold.eot?') format('eot'), url('FONT-NAME-bold.woff') format('woff'), url('FONT-NAME-bold.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FONT-NAME-italic';
  src: url('FONT-NAME-italic.eot?') format('eot'), url('FONT-NAME-italic.woff') format('woff'), url('FONT-NAME-italic.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;
}

Итак, чтобы использовать нужный вам вариант, вы должны вызвать font-family, который соответствует ему, и объявить в правиле font-weight: normal и font-style: normal. Если вы этого не сделаете, браузер может применить 'faux bold/italic' к элементу, который имеет эти правила по умолчанию. Стиль 'faux' работает, заставляя элемент показываться вместе с ним, даже если он уже использует курсив или полужирный шрифт. Проблема в том, что шрифт всегда выглядит некрасиво, потому что это не тот способ, которым он был создан.

То же самое происходит, когда вы определяете "обычный" шрифт, например, для элемента <p> и внутри него вы помещаете <strong> или <em>. <strong> и <em> заставят процесс полужирный/курсив над шрифтом. Чтобы избежать этого, необходимо применить правильный font-family, предназначенный сделать жирным шрифтом/курсивом, к правилу для <strong> и <em>, с их соответствующими свойствами (font-weight и font-style), установленными в normal:

strong {
  font-family: 'FONT-NAME-bold';
  font-weight: normal;
  font-style: normal;
}

em {
  font-family: 'FONT-NAME-italic';
  font-weight: normal;
  font-style: normal;
}

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

2.2 - Использование одного и того же имени семейства шрифтов, но разных весов и стилей

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

@font-face {
  font-family: 'FONT-NAME';
  src: url('FONT-NAME-normal.eot?') format('eot'), url('FONT-NAME-normal.woff') format('woff'), url('FONT-NAME-normal.ttf') format('truetype');

  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FONT-NAME';
  src: url('FONT-NAME-bold.eot?') format('eot'), url('FONT-NAME-bold.woff') format('woff'), url('FONT-NAME-bold.ttf') format('truetype');

  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'FONT-NAME';
  src: url('FONT-NAME-italic.eot?') format('eot'), url('FONT-NAME-italic.woff') format('woff'), url('FONT-NAME-italic.ttf') format('truetype');

  font-weight: normal;
  font-style: italic;
}

В этом методе веса и стили в объявлениях @font-face действуют как "маркеры". Когда браузер сталкивается с этими весами и стилями где-либо еще в CSS, он знает, к какому объявлению @font-face обращаться и какой вариант шрифта использовать.

Убедитесь, что ваши веса и стили совпадают. Если это так, когда вы используете <strong> или <em> внутри родительского элемента, который использует созданный вами @font-face, он загрузит правильное объявление.

В источнике этих встроенных методов стилизации (http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/) есть другой метод, который сочетает в себе два упомянутых мной способа (2.1 и 2.2). Но это приносит много проблем, в том числе 'faux bold/italic', вынуждая вас объявить <strong> право font-family и, для <em>, classes это стиль за вариации font, который отличается от weight. Я полагаю, что два из них, которые я выбрал, достаточно хороши, чтобы выполнять работу.

Источники: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/

Изменить 1:

Там нет необходимости использовать много расширений шрифтов. Тип .woff присутствует почти во всех браузерах, за исключением IE, если вам требуется поддержка IE8 (которая принимает только формат .eot). (http://caniuse.com/#feat=fontface)

Другой полезный совет - встраивать шрифт в CSS с использованием кодировки base64. Это поможет избежать большого количества запросов, но вы должны помнить, что он будет перекрывать CSS файл. Это можно сделать, организовав содержимое CSS и шрифты, чтобы быстро получить первые правила CSS в одном маленьком файле, а остальные - в другом файле CSS, закрыв тег <body>.

Ответ 3

вы можете добавить число в свойство font-weight, например, к легкой версии.

font-weight: normal; //  light version as it is.
font-weight: 700; // makes light version bolder.