1

For the <i> tag, I want English characters to show as italic, non-English characters to show as normal.

This is my 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;
}

The actual result is

The English characters are not Arial italic, while the non-English characters are in Kaiti.

The non-English characters are in Kaiti normak, which is correct, but the English characters are not Arial italic. Did I miss anything?

I'm using Chrome 54.0.

Gqqnbig
  • 5,845
  • 10
  • 45
  • 86

2 Answers2

0

Set a fallback font for i:

i {
  font-family: MyCustomFont, Arial, serif;
}
Fabian Schultz
  • 18,138
  • 5
  • 49
  • 56
0

Edit: This is your HTML:

<i>食english</i>

in order to assign specific css attributes to part of that text you need to enclose it in a different element. For example:

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

Now you can reference that element (span in this case) in the css:

span {
    font-style:italic;
}

The attribute you are looking for is font-style:italic; The HTML em element renders as italic (the browser already applies the above style) as far as i know. So you could go with:

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

and avoid applying the styling (as the browser does it directly).

I hope it helps.

Original:

If I understood the question correctly you are missing the italic styling:

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>
Alvaro
  • 9,247
  • 8
  • 49
  • 76
  • No, my HTML is `食english`，食 should be Kaiti normal, english should be Arial italic. – Gqqnbig Nov 12 '16 at 23:23
  • Well in that case you need to assign a different HTML element to either the english or the non-english. – Alvaro Nov 12 '16 at 23:25
  • Did you mean font-style in `@font-face` is unable to archive that? Can you explain what font-style does in `@font-face`? – Gqqnbig Nov 12 '16 at 23:27
  • There is no problem with @font-face. If you want to assign italic css attribute you need to enclose that text in a different element. – Alvaro Nov 12 '16 at 23:31