@font-face и размер шрифта

Идея в следующем заключается в том, что первая @font-face предназначена для Firefox, вторая для IE и Arial для всего, что не может понять первые два. Его все работает, за исключением того, что я хочу дать другой размер в случае Arial и не понял синтаксис, чтобы сделать это.

@font-face {
  font-family: Tribeca;
  src: url("Tribeca.ttf"); format("truetype");
}

@font-face {
  font-family: TribecaIE;
  src: url("Tribec0.eot");
}

BODY
{
    FONT-FAMILY: Tribeca, TribecaIE, Arial; font-size: 195%;
}

ОТВЕТЫ

Ответ 1

Я не считаю, что это возможно только с помощью CSS; нам, вероятно, понадобится использовать javascript.

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

Даже если браузер не может загрузить шрифт Arial, наш тест по-прежнему функционирует, потому что, когда мы укажем Arial во время теста, браузер по умолчанию будет иметь тот же шрифт, что и для второго элемента. Оба элемента будут по-прежнему иметь равную ширину, если браузер не сможет загрузить встроенные шрифты с помощью @font-face.

Если кто-то хочет, чтобы я еще больше проиллюстрировал код, я буду рад написать javascript.

Ответ 2

Это не поддерживается нормальными правилами CSS.

Я считаю, что ваши варианты

Ответ 3

Я считаю, что это (близко к тому, что у вас есть):

@font-face {
  font-family: Tribeca;
  src: url("Tribeca.ttf");
}

@font-face {
  font-family: Tribeca;
  src: url("Tribeca.eot");
}

body {
    font-family: Tribeca, Arial;
}

IE не будет знать, как открыть ttf, поэтому он не будет беспокоить. Затем он откроет eot. Затем вы просто указываете шрифт по указанному имени в объявлении body.

Ответ 4

Направляйте свои браузеры, зная, какой из них читает какой тип декларации. Условный комментарий загружает разные вызовы CSS. Затем вы можете сказать каждому, чтобы сделать что-то другое для каждого правила.

Также есть typekit

Ответ 5

@font-face {
    font-family: 'Tribeca';
    src: url(Tribeca.eot);
    src: local('Tribeca'), url(Tribeca.ttf) format('truetype');
    }

MSIE игнорирует последнюю строку, потому что не понимает правило format. и да, как указано porneL выше, format() должен идти в свойстве src.

local() заставит поддерживающие браузеры использовать локальный файл шрифта, если пользователь имеет его вместо загрузки с вашего сервера (и, возможно, IE игнорирует строку).

как для регулировки размера шрифта, как указано Gaby: CSS 3 font-size-adjust. но похоже, что он еще не получил широкого распространения.

Ответ 6

Чтобы удалить дублирование кода с помощью @font-face, вы можете сделать это через сервер. Если вы используете, например, некоторый urlrewrite, обнаружите UA, если он IE - возвращает файл с расширением .eot, если это обычный браузер - ttf.

Что касается меня, он отлично работает.

И для этого случая вы не должны изменять свои файлы css, просто должны иметь 2 файла:.ttf и .oet.

Ответ 7

Несмотря на то, что при использовании CSS с обычными хорошими практиками, вы можете использовать объявление !important в условном CSS.

В качестве примера мы создаем две таблицы стилей: "по умолчанию", в которой будет раздел для стилей, специфичных для Firefox, и таблица стилей Internet Explorer.

Затем, используя стандартный метод <link rel="" /> импорта таблиц стилей:

<link rel="stylesheet" href="normal/css/file.css" type="text/css" media="screen, projection">

<!--[if IE]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]-->

В стиле стилей по умолчанию наши стили Firefox завернуты в следующее:

@-moz-document url-prefix() {

    #my-id { font-size: 100%; }

}

Это работает, потому что раздел @-moz-document url-prefix() - это то, как веб-страницы стиля Firefox дополняют стиль. Таким образом, другие браузеры не понимают этого и поэтому просто пропустите его.

Ответ 8

BODY
{
    FONT: 140% Arial;
    FONT: 195% Tribeca,TribecaIE;
}