Html 如何在 CSS 中组合粗体和斜体?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/38205797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 13:31:11  来源:igfitidea点击:

How to combine bold and italic in CSS?

htmlcssfontstypography

提问by Sophia_ES

This W3Schools tutorialtaught me how to use the CSS font-styleproperty 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).

这个 W3Schools 教程教我如何使用 CSSfont-style属性使文本加粗(相当于<b&g>this</b>旧式 HTML)以及如何将文本设为斜体(相当于<i>this</i>旧式 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).

但是,我似乎无法在任何地方找到如何使文本同时具有这两个属性(相当于<b><i>this</i></b>老式 HTML)。

Is there a way to do this using pure CSS?

有没有办法使用纯 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?

这可以用纯css完成吗?

回答by Richard Hamilton

You were close.

你很接近。

italicis used with font-stylewhereas bold is used with font-weight.

italic与 一起使用,font-style而粗体与 一起使用font-weight

Use:

用:

font-weight: bold;
font-style: italic;

回答by TylerH

font-styleis a single-value property. boldis font-weight, anyway. To combine multiple values, you can use the shorthand fontproperty. However, the fontshorthand has required entries: font-sizeand font-family. If you don't include both of these in the shorthand, the property will be ignored.

font-style是单值属性。bold无论如何,是字体粗细。要组合多个值,您可以使用速记font属性。但是,font速记需要输入:font-sizefont-family。如果您在速记中不包含这两者,则该属性将被忽略。

Include these in your fontshorthand along with italic boldand it should work.

将这些包含在您的font速记中italic bold,它应该可以工作。

回答by epascarello

Another reason why W3Schools is bad, you should be using font-weightto set bold and font-styleto set italics.

W3Schools 不好的另一个原因是,您应该使用font-weight设置粗体和font-style设置斜体。

font-weight: bold;
font-style: italic;

回答by Weedoze

You can have an italic and bold font using those 2 properties

您可以使用这两个属性使用斜体和粗体字体

font-style  : italic
font-weight : bold

font-weight doc : W3Schools font-weight

字体粗细文档:W3Schools 字体粗细

font-style doc : W3Schools font-style

字体样式文档:W3Schools 字体样式

回答by vignesh

Please have look at this code:

请看一下这段代码:

font: italic bold 12px/30px Georgia, serif;