font-style in @ font-face funktioniert nicht mit lokaler Schriftart

Question

Für die <i>-Tag, möchte ich Englisch Zeichen als kursiv, nicht-Englisch Zeichen als normal anzeigen.

Dies ist mein CSS.

@font-face { 
    font-family: MyCustomFont; 
    src: local(Kaiti); 
} 

@font-face { 
    font-family: MyCustomFont; 
    font-style:italic; 
    unicode-range: U+00-024F; 
    src: local(Arial); 
} 

i { 
    font-family: MyCustomFont; 
    font-style:normal; 
} 

Das tatsächliche Ergebnis ist

Die nicht-englischen Zeichen in Kaiti Normak sind, was richtig ist, aber die englischen Zeichen sind nicht Arial kursiv. Habe ich etwas vergessen?

Ich benutze Chrome 54.0.

Answer 1

eine Ersatzschriftart für i Set:

i { 
    font-family: MyCustomFont, Arial, serif; 
} 

Answer 2

bearbeiten: Das ist Ihre HTML:

<i>食english</i> 

um spezifische CSS zuweisen Attribute Teil der Sie Text müssen schließe es in ein anderes Element ein. Zum Beispiel:

<i>食<span>english</span></i> 

Jetzt können Sie dieses Element (Spanne in diesem Fall) in der CSS-Referenz:

span { 
    font-style:italic; 
} 

Das Attribut Sie suchen ist font-style: italic; Die HTML em element rendert so kursiv (der Browser wendet den obigen Stil bereits an), soweit ich weiß. Also könnten Sie mit gehen:

<i>食<em>english</em></i> 

und vermeiden Sie die Anwendung des Styling (wie der Browser es direkt macht).

Ich hoffe es hilft.

---

Original-:

Wenn ich die Frage richtig verstanden Sie das Kursiv Styling fehlen:

i { 
    font-family: MyCustomFont; 
    font-style:italic; 
} 

@font-face { 
 
    font-family: MyCustomFont; 
 
    src: local(Kaiti); 
 
} 
 

 
@font-face { 
 
    font-family: MyCustomFont; 
 
    font-style:italic; 
 
    unicode-range: U+00-024F; 
 
    src: local(Arial); 
 
} 
 

 
i { 
 
    font-family: MyCustomFont; 
 
    font-style:italic; 
 
}

<span>食<i>english</i></span>