Wie kann man zwei verschiedene Größen für zwei verschiedene Schriftarten hinzufügen

Question

Wie kann man zwei verschiedene Größen für zwei verschiedene Schriftarten hinzufügen?

Dies ist mein Körper CSS-Code:

body { 
    direction: rtl; 
    font-family: Roboto, Droid Arabic Kufi; 
} 

Roboto für englische Wörter und Droid Arabisch Kufi für arabische Wörter, Wie machen kann, wenn das Wort Englisch (Roboto) ist, so dass die Größe 13px sein, aber wenn es Arabisch ist (Droid Arabic Kufi) ändern Sie die Größe auf 12px.

Answer 1

Warum nicht beide eine Englisch & arabische Klasse einschließlich jeder font-family und font-size:

.english { 
    direction: ltr; 
    font-family: 'Roboto', sans-serif; 
    font-size: 13px; 
} 
.arabic { 
    direction: rtl; 
    font-family: 'Droid Arabic Kufi', sans-serif; 
    font-size: 12px; 
} 

Dann ist es mit dem je html-Element zuweisen, auf der Sprache ist:

<span class="english">english text 13px font size</span> 
<span class="arabic">arabic text 12px font size</span> 

Voll Snippet Beispiel (gebrauchte Droid Sans als Demo anstelle von Droid Arabic Kufi):

.english { 
 
    direction: ltr; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-size: 13px; 
 
} 
 
.arabic { 
 
    direction: rtl; 
 
    font-family: 'Droid Sans', sans-serif; 
 
    font-size: 12px; 
 
}

<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Roboto" rel="stylesheet"> 
 
<span class="english">english text 13px font size</span><br> 
 
<span class="arabic">arabic text 12px font size</span>

Answer 2

Dazu müssen Sie die Schriften separat als Schriftart für separat ausgewählte Elemente zuweisen. Ich würde vorschlagen, Klassen zu verwenden, eine Klasse für das Englische und eine Klasse für die arabischen Wörter. Angenommen, Sie haben eine Klasse .english und eine Klasse .arabic entsprechend. Dann könnten Sie Stile wie folgt:

.english { 
    direction: ltr; 
    font-family: Roboto; 
    font-size: 13px; 
} 

.arabic { 
    direction: rtl; 
    font-family: Droid Arabic Kufi; 
    font-size: 12px; 
} 

Es ist kein Weg, dies zu tun, ohne Klassen oder eine andere Art und Weise mit der eindeutigen Elemente zu identifizieren, die eine Sprache oder die andere enthalten.