2010-08-18 18 views
7

Stiamo creando un sito che utilizza sia il giapponese che l'inglese. Vogliamo allontanarci dai caratteri giapponesi predefiniti che non possono usare ClearType. C'è un modo per dire al browser di usare un carattere giapponese diverso JUST per i caratteri giapponesi (come Meiryo) e un altro font solo per i caratteri latini (come Helvetica) sulla stessa pagina? Non vogliamo usare parole inglesi per usare il font Meiryo.Utilizza caratteri diversi per caratteri latini e caratteri giapponesi con CSS

In realtà abbiamo usato una punta per specificare i caratteri inglesi prima nel CSS da questo articolo: http://www.lukew.com/ff/entry.asp?118

Tuttavia, questo non funziona in IE. Anche se specifichiamo Helvetica, Verdana, o qualsiasi altro font ampiamente disponibile prima e poi il carattere giapponese nel CSS, IE utilizzerà comunque il font giapponese per le parole inglesi. Firefox, Chrome, ecc. Funzionano come previsto.

(Se possibile, speriamo di non ricorrere a qualcosa di simile avvolgendo ogni parola inglese in un arco)

risposta

0

Come stai dicendo la pagina di quale linguaggio per stampare su schermo?

Se si ottiene una variabile, non è possibile utilizzare questa variabile come classe che si utilizza per un div del corpo.

<body class="english"> 

o

<body class="japanese"> 
5

Non si può andare in giro marcatura ogni sezione linguistica con una classe e carattere, se si desidera che questo lavoro cross-browser. Non può essere fatto solo con i CSS.

È possibile applicare un corso di lingua manualmente o automaticamente. Potrebbe essere molto lavoro da sostenere e mantenere, ma è solido. Dinamicamente può essere fatto usando uno script di back-end o Javascript, eseguendo una scansione di una stringa per i caratteri che rientrano in determinati blocchi di caratteri Unicode e applicando una classe linguistica di conseguenza.

Si possono trovare le definizioni dei blocchi qui (giapponese è hiragana e katakana): http://www.fileformat.info/info/unicode/block/index.htm

io consiglierei la via back-end di fare questo, perché cambiare un font sulla pagina potrebbe causare sfarfallio o spostamento del elementi durante il caricamento della pagina.

+2

hiragana e katakana sono solo i set di caratteri sillabici, si sta lasciando fuori tutto il kanji (i caratteri CJK). –

3

Creare una classe CSS per il testo inglese e giapponese.

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

Se intera pagina è in Giapponese, aggiungi class = "ja" per tag body, se c'è il contenuto misto, aggiungere class = "ja" per l'elemento HTML che contiene testo giapponese, per esempio:

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

Credo che questo sia l'unico modo per farlo e il modo in cui è fatto nella maggior parte delle pagine di questo sito giapponese/inglese http://www.jlptstudy.com/N5/ – PandaWood

+0

*** Suggerimento: *** HTML ha un attributo universale 'lang' e CSS ha un selettore per esso: [Stile usando l'attributo lang (w3.org, più lingue)] (https://www.w3.org/International/questions/qa-css- Lang) – hakre

2

Ho risolto il problema utilizzando la proprietà CSS 'unicode-range'.

È possibile trovare i dettagli qui: https://developer.mozilla.org/en/docs/Web/CSS/@font-face/unicode-range

Esempio:

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

Problemi correlati