Запасной вариант CSS для маленьких заглавных букв OpenType

Последнее обновление: 28 февраля 2016 г.

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

@supports

Воспользуйтесь правилом @supports в браузерах. Это то, что я изначально решил сделать в этом проекте.[1] Вы используете правило следующим образом:

.some-class {
    font-variant: small-caps;
}

@supports(font-feature-settings: 'smcp') {
    .some-class {
        font-variant: normal;
        font-feature-settings: 'smcp';
    }
}

Я упростил, исключив версии с префиксом; вам нужно будет добавить префиксы -webkit- и -moz-, чтобы это действительно заработало. Обновление от 28 февраля 2012 г. вам больше не нужен префикс -moz-, и он будет работать в Safari в следующей версии (iOS 9.3 и OS X Safari 9.1).

Это имеет то преимущество, что поддержка настоящих маленьких заглавных букв и поддержка правила @supports очень похожи:

• @supports: Могу ли я использовать запросы функций?: Chrome 31+, Firefox 29+, Opera 23+ , Android 4.4+, Safari 9+, Edge 12+, Chrome для Android

  Обновление от 28 февраля 2016 г., как видно из приведенной выше диаграммы, все вечнозеленые браузеры теперь поддерживают @supports.

• font-feature-settings: Использование строчных букв и Текстовые рисунки в Интернете: Chrome, Firefox, IE10+

Это не идеально: поскольку IE10/11 не реализует @supports, вы пропускаете один браузер. (Редактировать, 31 сентября 2015 г. В IE нет @supports, но в Edge 12+ есть, и это должно охватывать всех пользователей сайта.) Тем не менее, это дает вам большую часть пути, и это должно быть обращено в будущее: это должно постепенно улучшать сайт. Обычные (плохие, но функциональные) маленькие заглавные буквы отображаются в то же время, и когда браузеры в конце концов доберутся до использования маленьких заглавных букв OpenType по умолчанию для font-variant: small-caps, это будет продолжать работать нормально. Это прогрессивное улучшение, и оно отлично подойдет для большинства целей.[2]

Подмножество шрифта

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

Чтобы осуществить это, вам нужно начать с подстановки шрифта. Вы можете сделать это вручную с помощью инструмента шрифтов или (более простой способ) вы можете использовать пользовательский инструмент поднастройки FontSquirrel в их генератор веб-шрифтов. (Примечание. Вы должны проверить лицензию и подтвердить, что рассматриваемый шрифт допускает такие модификации. См. ниже.) В веб-шрифте генератор, сначала загрузите файл, который вы хотите изменить. Затем выберите переключатель Эксперт. Большинство настроек можно оставить как есть; это хорошие разумные значения по умолчанию. В середине страницы вы увидите параметры Сведение OpenType. Здесь выберите только маленькие заглавные буквы. Запустите генератор. Результатом будет полная замена обычных строчных букв набором прописных.[3]

В этом случае вы можете просто применить стиль к элементам, которые вы хотите иметь маленькими прописными буквами, например:

.divine-name {
    font-family: 'my_typeface_smcp', 'my_typeface', serif;
}

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

Однако у этого подхода есть несколько недостатков:

1. Это означает доставку другого файла шрифта. В моем случае это был бы приемлемо небольшой размер (поскольку на самом деле мне нужно только четыре символа), но в целом это все же следует учитывать. В любом случае, это еще один HTTP-запрос, который еще больше замедлит загрузку страницы или, по крайней мере, даст вам некую вспышку нестилизованного текста при перезагрузке.

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

Другая важная причина не делать этого таким образом заключается в том, что это требует значительно более высоких затрат на обслуживание. Если в какой-то момент вам нужно изменить или обновить шрифт, вам придется пройти через процесс поднастройки заново. Напротив, первый вариант будет просто работать, хотя, по общему признанию, не так приятно, как можно было бы надеяться, и будет не только продолжать работать, но и со временем будет улучшаться по мере того, как браузеры расширяют свою реализацию стандарта CSS3.

Заметки

1. По разным причинам (особенно см. примечание 2 ниже) я фактически выбрал второй изложенный здесь подход, которого я пытался избежать. Увы.

2. Проблемы остаются: даже в последней версии Chrome (38 на момент редактирования) использование подхода font-feature-settings: 'smcp' имеет некоторые проблемы. Например, если вы включите letter-spacing (довольно распространенная рекомендация для строчных букв),< s> маленькие заглавные буквы вернутся к обычным строчным буквам. Исправлено в Chrome 48. HT к ответчику ниже.

3. #P20# <блочная цитата> #P21#

Поддержка font-feature-settings:"smcp" в последних браузерах улучшилась. Chrome 48 исправляет ошибку межбуквенного интервала. И, согласно caniuse.com, будущие версии Safari для iOS и рабочего стола будут его поддерживать. Однако версия с префиксом по-прежнему требуется для -webkit.

Вы уже упомянули это здесь, изящная деградация.

Используйте параметр font-feature, и если браузер не поддерживает функции opentype, пользователь будет получать все содержимое по-прежнему, причем в худшем случае это будут полноразмерные заглавные буквы; ничего не потеряно. Я бы сказал, что это изящная деградация.

В качестве альтернативы вы можете рассмотреть возможность использования Typogruby (http://avdgaag.github.io/typogruby/) или подобное, или вручную добавив класс к этому слову, на которое вы можете настроить таргетинг непосредственно в своем html, подделав его с помощью CSS2, например:

.caps {font-size: .83em; letter-spacing: .25em; text-transform: uppercase;}

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

Перестаньте на мгновение думать об OpenType и подумайте о содержании: вам нужны разные стили для семантически разных данных (в данном случае стилизация заглавными буквами для специального религиозного слова). Это буквально то, для чего была изобретена HTML-разметка. Просто автоматически заверните эти слова в разметку <span class="smallcapped"> с помощью javascript, и пусть его класс использует специальный шрифт с маленькими заглавными буквами. Это очень легко сделать, и даже позволяет найти лучший набор малых заглавных букв, независимо от основного шрифта текста.

Просто запускайте некоторый код каждый раз, когда раздел загружается в DOM (категорически не после того, как весь ваш контент будет готов, если только вы не показываете только короткие фрагменты текста):

function wrapSmallcaps(element) {
  var content = element.innerHTML;
  ["LORD"].forEach(function(term) {
    var search = new RegExp("    W?"+term+"  W?",'g');
    content = content.replace(search, function(a,b) {
      return a.replace(term, "<span class='smallcapped'>"+term+"</span>");
    });
  });
  element.innerHTML = content;
}

пример: http://jsbin.com/cowumaxe/1/edit

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

(и, конечно, этот код буквально универсален для любого браузера, начиная с IE8 -- http://caniuse.com/#search=queryselector не показывает «нет поддержки» или даже «частичная поддержка» для всех браузеров, которые люди фактически используют)