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

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

Я считаю, что ваши параметры -

• свойство font-size-adjust для css 3
• javascript (jQuery) , и проверьте текущий шрифт, чтобы увидеть, какой из трех является эффективным, и соответствующим образом отрегулируйте размер шрифта .. http://www.w3.org/TR/css3-fonts/#font-size-adjust ( вам также следует взглянуть на http://www.modernizr.com/ )

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

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

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

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

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

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

@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 .

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

Также существует typekit

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

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

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

относительно настройки размера шрифта, как указывает Габи: CSS 3 font-size-adjust. но похоже, что он еще не получил широкой поддержки.

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

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

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