Может ли CSS выбрать другой шрифт и размер по умолчанию в зависимости от языка

У меня есть следующий фрагмент CSS:

INPUT{ font-family: Raavi; font-size: 14px;}

Что хорошо работает, когда текстовое поле содержит какой-нибудь скрипт на пенджаби, например так:

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

Поэтому мой вопрос можно сформулировать так:

  • Есть ли какой-либо тип условного семейства шрифтов и выбор размера в CSS на основе ввода
  • Есть ли в любом случае CSS знать о языке ввода?

Так что я мог бы создать следующую PSEUDO_CSS:

INPUT{ EN-font-family: Verdana; EN-font-size: 12px; PA-font-family; Raavi; EN-font-size: 14px;}

или же

INPUT.EN{ font-family: Verdana; font-size: 12px;}
INPUT.PA{ font-family: Raavi; font-size: 14px;}
Источник

7 ответов

Решение

Это решено в CSS3, и это не поможет совместимости со старыми браузерами, но это работает для меня, когда я смешиваю греческий и латинский текст с разными шрифтами для каждого. Вот пример, взятый из рабочего проекта модуля шрифтов CSS:

@font-face {
    font-family: BBCBengali;
    src: url(fonts/BBCBengali.ttf) format("opentype");
    unicode-range: U+00-FF, U+980-9FF;
}

unicode-range бит - это волшебный ключ: он говорит браузеру использовать это выражение font-face только для этого конкретного блока символов Unicode. Если браузер находит символы в этом диапазоне, он использует этот шрифт; для символов вне этого диапазона он возвращается к следующему наиболее конкретному оператору CSS, следуя обычному шаблону по умолчанию.

Источник 
input { font-family: Verdana, Raavi, sans-serif; font-size: 14px;}

Это должно работать для ваших целей:

  • Если текст на английском, оба шрифта должны содержать глифы, и Verdana будет предпочтительнее
  • Если текст панджабский, Вердана не должна содержать глифов, поэтому браузер должен вернуться к Раави

Я не уверен, что все браузеры будут вести себя правильно, но это то, что они должны делать в соответствии со спецификацией CSS.

Источник

Чистое решение CSS может быть таким простым:

input[lang=en] {
  font-family:Verdana;
  font-size:12px;
}

input[lang=pa] {
  font-family:Raavi;
  font-size:14px;
}

Но это все еще зависит от вас, чтобы установить lang атрибут входного элемента.

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

Обновить:

По вашему запросу, вот пример наивного способа сделать это с ванильным JavaScript. Конечно, есть улучшения, но это "работает".

<style type="text/css">
  .lang-en {
    font-family:Verdana;
    font-size:12px;
  }

  .lang-pa {
    font-family:Raavi;
    font-size:14px;
  }
</style>

<form>
  <input type="text" onkeyup="assignLanguage(this);" />
</form>

<script type="text/javascript">
  function assignLanguage(inputElement) {
    var firstGlyph = inputElement.value.charCodeAt(0);

    if((firstGlyph >= 65 && firstGlyph <= 90) || (firstGlyph >= 97 && firstGlyph <= 122)) {
      inputElement.setAttribute('lang', 'en');
      inputElement.setAttribute('xml:lang', 'en');
      inputElement.setAttribute('class', 'lang-en');
    } else {
      inputElement.setAttribute('lang', 'pa');
      inputElement.setAttribute('xml:lang', 'pa');
      inputElement.setAttribute('class', 'lang-pa');
    }
  }
</script>

Этот пример срабатывает после того, как персонаж был напечатан. Затем он проверяет, попадает ли он в диапазон, считающийся "английским", и соответственно назначает атрибуты. Это устанавливает lang, xml:lang, а также class атрибутов.

Источник

В вашем HTML-теге у вас есть это свойство lang.(Просто lang='en' или lang = 'en-EN')

Мы можем использовать это в CSS.

Если мы хотим дать определенный CSS для тега p для другого языка,

p:lang(en-EN){
}

Соответствующий стиль мы должны добавить.

Это способ, которым мы можем дать конкретные CSS для разных языков.

пример

html{font-family: Raavi; font-size: 14px;}
html:lang(en-EN){font-family: Verdana; font-size: 12px;}
Источник

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

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

Источник

На данный момент единственным надежным решением является перечисление шрифтов в желаемом порядке, как указано в милях.

Надеемся, что (правильное) решение, указанное Zack, могло бы должным образом поддерживаться большим количеством браузеров.

Но даже тогда вы будете обязаны помечать различные разделы соответствующим атрибутом lang.

Ничто не может надежно определить язык любого текста.

Источник

Как CSS может знать о языке ввода?

Боюсь, единственное решение состоит в том, чтобы найти шрифт Unicode, который выглядит симпатично для обоих наборов символов. Что далеко от совершенства, если ваш удаленный читатель не установил его. Возможно Arial Unicode MS.

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