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

На данный момент шрифты  OpenType поддерживаются во всех современных версиях браузеров, даже браузером Internet Explorer, начиная с 10 версии, и проблем с использованием свойств для задания особенностей шрифтов тоже нет.

Так что для начала встроим шрифт в веб-страницу. Для этого примера используется замечательный бесплатный шрифт MEgalopolisExtra, созданный Smeltery.

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

@font-face {
        font-family: 'Megalopolis';
        src: url('megalopolis.eot');
        src: url('megalopolis.eot?#iefix') format('embedded-opentype'),
                 url('megalopolis.woff') format('woff'),
                 url('megalopolis.ttf') format('truetype'),
                 url('megalopolis.svg#megalopolis') format('svg');
        src: url('megalopolis.otf');
}

После этого применим шрифт Megalopolis к элементу span абзаца на веб-сайте и включим замену дробей:

p span{
        font-family: Megalopolis, serif;
        font-feature-settings: "frac";
        font-size: 2rem;
}

Теперь можно записывать в тексте любые числа, разделенные делителем, и они автоматически превратятся в дробь, браузер распознает правильный символ делителя или обычный знак косой черты:

Например, фраза: «Возьмите 3⁄4 стакана муки.» с помощью правильного кода CSS будет выглядеть так:

Примечание редакции (переводчика Maya_Specctra или как ты посчитаешь нужным написать): если для записи дробей используется шрифт, у которого нет русских букв, как в этом примере, можно положить дроби в элемент span, которому при необходимости можно задать, например, класс. Также для многих шрифтов OpenType для замены дробей на специальные символы дробей не нужно добавлять свойство для задания особенностей шрифтов, дроби меняются автоматически, но все же на всякий случай свойство лучше записать или хотя бы проверить, происходит ли замена без этого свойства во всех интересующих версиях браузеров.

Рекомендации по записи дробей:

Если вам нужно использовать дроби на веб-странице, можно порекомендовать следующее:

• Если дроби встречаются на веб-странице часто, используйте объекты HTML, если нет возможности использовать подходящий шрифт OpenType.

• Если Вы используете шрифт OpenType или дроби на веб-странице встречаются редко, то можно использовать обычную запись с числителем и знаменателем, а также правильным символом делителя.

• Включите замену дробей для абзацев и другого содержимого с помощью свойства CSS3. Правильно записанные дроби, отображаемые с помощью шрифта OpenType, у которого присутствуют символы дробей, будут заменены автоматически. Подумайте над созданием специального класса для задания этих свойств в Вашей стандартной таблице стилей, чтобы применять его к элементам span там, где нужно создать такой эффект.

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

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Использование значения свойства CSS ширины по размеру содержимого
• Использование свойства CSS перспективы
• Использование свойства CSS размера табуляции для сохранения пробела