Веб-шрифт без умлаута

Недавно я купил шрифт и хотел вставить его на свой веб-сайт с помощью веб-шрифтов.

Теперь проблема в том, что: купив его, я понял, что в шрифте отсутствуют умлауты, такие как ä, ü и ö, поэтому вместо символа (отсутствует) отображается пустое место.

Есть ли способ предотвратить это? Как сказать css использовать другой шрифт для пропущенных символов? Или мне придется редактировать сам шрифт?

http://i40.tinypic.com/315y5jt.png

Источник

2 ответа

Решение

Нет приемлемого способа предотвратить это. Используйте другой шрифт. (Возможно, существует расширенная версия купленного вами шрифта с более высокой платой.) Шрифт должен быть выбран так, чтобы он содержал все символы, по крайней мере, все буквы, которые могут вам понадобиться в тексте.

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

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

Источник

Поскольку не существует "простого" или чистого способа обойти это, кроме ремоделирования файлов шрифтов, вот небольшой JS-скрипт для замены расширенных символов ASCII на <span>, (Это можно сделать только для точных, необходимых символов, но вы, вероятно, в конечном итоге зададите себе тот же вопрос снова, как только случайно встретите другого персонажа, который не поддерживается.)

JS только на примере текста:

"Hêllo wörld. ÄÖÜßäöü".replace(/([\x80-\xff])/gi, '<span class="arial">$&</span>')

Результат:

H<span class="arial">ê</span>llo w<span class="arial">ö</span>rld. <span class="arial">Ä</span><span class="arial">Ö</span><span class="arial">Ü</span><span class="arial">ß</span><span class="arial">ä</span><span class="arial">ö</span><span class="arial">ü</span>

JQuery:

$('.webfont').each(function(){
    this.innerHTML = this.innerHTML.replace(/([\x80-\xff])/gi, '<span class="arial">$&</span>')
});

Узлы с .webfont должен содержать только текст, хотя он также должен работать в большинстве других случаев.

Источник
Другие вопросы по тегам