Czy CSS może wybrać inną domyślną czcionkę i rozmiar w zależności od języka

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

To powinno działać dla Twoich celów:

• Jeśli tekst jest w języku angielskim, obie czcionki powinny zawierać glify, A Preferowana będzie Verdana
• Jeśli tekst jest w języku pendżabskim, Verdana nie powinna zawierać glifów, więc przeglądarka powinna wrócić do Raavi

Nie jestem pewien, czy wszystkie przeglądarki będą zachowywać się poprawnie, ale to właśnie powinny zrobić zgodnie ze specyfikacją CSS.

Czyste rozwiązanie CSS może być tak proste jak:

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

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

Ale to nadal do ciebie należy ustawienie atrybutu lang elementu wejściowego.

Niestety, jak w przypadku większości fancy Funkcje CSS, selektory atrybutów nie działają w 100% w całej tablicy przeglądarek. Moim zdaniem najlepszym rozwiązaniem jest użycie klasy dla każdego języka i przypisanie jej do elementu wejściowego.

Aktualizacja:

Na Twoją prośbę, oto przykład naiwnego sposobu na zrobienie tego z wanilią JavaScript. Z pewnością należy wprowadzić ulepszenia, ale to "działa".

<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>

Ten przykład zostanie wywołany po wpisaniu znaku. Następnie sprawdza, czy mieści się między zakresem uważanym za "Angielski" i odpowiednio przypisuje atrybuty. Ustawia lang, xml:lang, i class atrybuty.

Powszechną praktyką podczas utrzymywania wielojęzycznych stron internetowych jest używanie oddzielnych plików CSS dla każdego języka. Jest to pożądane, ponieważ będziesz musiał dostosować więcej niż czcionkę. Często trzeba będzie dostosować odstępy, aby dopasować długość ciągów w języku. Ponadto, może być konieczne dostosowanie niektórych podstawowych formatowania strony, aby uczynić ją bardziej naturalną dla użytkowników języka.

Solidną odpowiedzią jest umiędzynarodowienie, a nie tylko zadowolić się inną czcionką ponieważ w końcu okaże się, że wybór czcionki będzie niewystarczający.

W znaczniku html masz tę właściwość lang.(po prostu lang= ' en ' lub lang= 'en-EN')

Możemy użyć tego w CSS.

Jeśli chcemy podać konkretny CSS dla znacznika p dla innego języka,

p:lang(en-EN){
}

Odpowiedni styl musimy dodać.

W ten sposób możemy nadać poszczególnym css dla różnych języków.

Przykład

html{font-family: Raavi; font-size: 14px;}
html:lang(en-EN){font-family: Verdana; font-size: 12px;}

Skąd CSS mógł wiedzieć o języku wejściowym?

Obawiam się, że jedynym rozwiązaniem jest znalezienie czcionki unicode, która wygląda ładnie dla obu zestawów znaków. Co jest dalekie od ideału, jeśli twój zdalny czytnik go nie zainstalował. Może Arial Unicode MS.

Jedynym na razie niezawodnym rozwiązaniem jest Lista czcionek w żądanej kolejności, zgodnie z wskazaniami Mil.

Miejmy nadzieję, że (poprawne) rozwiązanie wskazane przez Zacka będzie poprawnie obsługiwane przez więcej przeglądarek.

Ale nawet wtedy twoim obowiązkiem będzie oznaczyć różne sekcje odpowiednim atrybutem lang.

Nic nie jest w stanie niezawodnie wykryć języka dowolnego tekstu.