Utiliser des polices différentes pour les caractères latins et les caractères japonais avec CSS

Nous créons un site qui utilise le japonais et l'anglais. Nous voulons nous éloigner des polices japonaises par défaut qui ne peuvent pas utiliser ClearType. Existe-t-il un moyen d'indiquer au navigateur d'utiliser une autre police japonaise JUST pour les caractères japonais (Like Meiryo) et une autre police pour les caractères latins (Like Helvetica) sur la même page? Nous ne voulons pas de mots anglais pour utiliser la police de caractères Meiryo.Utiliser des polices différentes pour les caractères latins et les caractères japonais avec CSS

Nous avons en fait utilisé une astuce pour spécifier les polices en anglais d'abord dans le CSS de cet article: http://www.lukew.com/ff/entry.asp?118

Cependant, cela ne fonctionne pas dans IE. Même si nous spécifions Helvetica, Verdana ou toute autre police largement disponible en premier, puis la police japonaise dans le CSS, IE utilisera toujours la police japonaise pour les mots anglais. Firefox, Chrome, etc. fonctionnent comme prévu.

(Si possible, nous espérons ne pas recourir à quelque chose comme emballage chaque mot anglais dans une période)

Source

2010-08-18 Franky

Comment vous disent la page langue d'imprimer à l'écran?

Si vous obtenez une variable, ne pouvez-vous pas utiliser cette variable comme classe que vous utilisez pour une div de corps.

<body class="english">

<body class="japanese">

Source

2010-09-16 13:44:40

Vous ne pouvez pas obtenir le marquage dans chaque section linguistique avec une classe et la police si vous voulez que cela fonctionne cross-browser. Cela ne peut pas être fait uniquement avec CSS.

Vous pouvez appliquer une classe de langue manuellement ou automatiquement. Manuellement peut-être beaucoup de travail à soutenir et à maintenir, mais est robuste. Dynamiquement, il peut être fait en utilisant un script back-end ou Javascript, en analysant une chaîne pour les caractères qui tombent dans certains blocs de caractères Unicode, et en appliquant une classe de langue en conséquence.

Vous pouvez trouver les définitions de bloc ici (japonais est Hiragana et Katakana): http://www.fileformat.info/info/unicode/block/index.htm

Je recommande la voie arrière-plan de le faire, parce que changer une police sur la page peut provoquer des scintillements ou un déplacement de éléments pendant le chargement de la page.

Source

2010-09-18 17:53:03 Blaise

hiragana et katakana ne sont que les jeux de caractères syllabique, vous quittez toutes les kanjis (les caractères CJK). –

Créer une classe css pour le texte anglais et japonais.

.ja { font-family: meiryo, sans-serif; } 
.en { font-family: arial, verdana, sans-serif; }

Si la page entière est en japonais, ajouter class = "ja" pour balise body, s'il y a un contenu mixte, ajouter class = "ja" à l'élément html qui contient du texte japonais, par exemple:

<td class="ja">日本語</td>

Source

2010-09-24 13:18:58 djrsargent

Je crois que c'est la seule façon de le faire, et la façon dont cela est fait sur la plupart des pages de ce site japonais/anglais http://www.jlptstudy.com/N5/ – PandaWood

*** Indice: *** HTML a un attribut universel 'lang' et CSS a un sélecteur pour cela: [Styling utilisant l'attribut lang (w3.org, plusieurs langues)] (https://www.w3.org/International/questions/qa-css- lang) – hakre

J'ai résolu mon problème en utilisant la propriété CSS 'unicode-range'.

Vous trouverez les détails ici: https://developer.mozilla.org/en/docs/Web/CSS/@font-face/unicode-range

Exemple:

/* bengali */ 
 
@font-face { 
 
    font-family: 'Atma'; 
 
    font-style: normal; 
 
    font-weight: 400; 
 
    src: url(https://fonts.gstatic.com/s/atma/v2/tUcVDHNCVY7oFp6g2zLOiQ.woff2) format('woff2'); 
 
    unicode-range: u+0980-09FF; 
 
} 
 

 

 
body { 
 
    font-family: 'Atma', arial, sans-serif; 
 
    font-size: 18px; 
 
}

<p>Example is better than precept.</p> 
 
<p>উপদেশের চেয়ে দৃষ্টান্ত ভালো।</p>

Source

2017-07-13 11:00:59

Utiliser des polices différentes pour les caractères latins et les caractères japonais avec CSS

Répondre

Questions connexes