问题
This W3Schools tutorial taught me how to use the CSS font-style property to make text bold (equivalent to <b&g>this</b> in old-fashioned HTML) as well as how to make text italic (equivalent to<i>this</i> in old-fashioned HTML).
However, I can't seem to find anywhere how to make text have both properties at the same time (equivalent to <b><i>this</i></b> in old-fashioned HTML).
Is there a way to do this using pure CSS?
I've tried this:
font-style: italic bold;
The result was that the page ignored both properties, and it was as though I never specified this property at all.
I got the same results when I tried this:
font-style: italic, bold;
I got a different result when I tried this:
font-style: italic; bold;
This time, what happened is that it used the first style given (italic) but ignored the second (bold).
Can this be done with pure css?
回答1:
You were close.
italic is used with font-style whereas bold is used with font-weight.
Use:
font-weight: bold;
font-style: italic;
回答2:
font-style is a single-value property. bold is font-weight, anyway. To combine multiple values, you can use the shorthand font property. However, the font shorthand has required entries: font-size and font-family. If you don't include both of these in the shorthand, the property will be ignored.
Include these in your font shorthand along with italic bold and it should work.
回答3:
Another reason why W3Schools is bad, you should be using font-weight to set bold and font-style to set italics.
font-weight: bold;
font-style: italic;
回答4:
You can have an italic and bold font using those 2 properties
font-style : italic
font-weight : bold
font-weight doc : W3Schools font-weight
font-style doc : W3Schools font-style
回答5:
Please have look at this code:
font: italic bold 12px/30px Georgia, serif;
来源：https://stackoverflow.com/questions/38205797/how-to-combine-bold-and-italic-in-css