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

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

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

Что отлично работает, когда текстовое поле содержит некоторые Punjabi script следующим образом: ਪੰਜਾਬੀ

Но пользователь может ввести английский вместо этого, и я предпочел бы использовать шрифт 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;}

Ответ 1

Это рассматривается в 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 только для этого конкретного блока символов Юникода. Если браузер находит символы в этом диапазоне, он использует этот шрифт; для символов вне этого диапазона, он возвращается к следующему наиболее определенному оператору CSS, следующему обычному шаблону дефолта.

Ответ 2

input { font-family: Verdana, Raavi, sans-serif; font-size: 14px;}

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

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

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

Ответ 3

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

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

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

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

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

Update:

По вашему запросу здесь приведен пример наивного способа сделать это с помощью ванильного 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.

Ответ 4

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

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

Ответ 5

В вашем теге 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;}

Ответ 6

Как CSS знал о языке ввода?

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

Ответ 7

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

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

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

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