应用不同的字体系列<p>根据 HTML lang 属性标记</p>

Question

I have two font styles, and i want to apply each different font to <p> tag when lang attribute in html changed. For example when lang set to fr change <p> font-family to fr-font.

Answer 1

You can select your elements with CSS' attribute selectors . Your code might look like this:

html[lang=fr] p {
    font-family: sans-serif;
}

Answer 2

Use the :lang pseudo-class which matches an element based on what language it is specified to be (and languages are inherited so you don't need to worry about targetting an element with a specific attribute, descendant combinators, or nesting).

 p:lang(en) { font-style: italic; } p:lang(fr) { color: blue; }

 <div lang="en"> <p>Is this English?</p> <p lang="fr">Est-ce français?</p> </div> <div lang="fr"> <p lang="en">Is this English?</p> <p>Est-ce français?</p> </div>

Answer 3

u can use the :lang() attribute in css like this

p:lang(fr) {
  font-family: yourFont;
}