CSS中的font合成属性的应用问题?

font合成属性可以用来作为font-style,font-weight,font-height;font-family属性的合成
font:[<font-style>||<font-variant>||<font-weight>]?<font-size>[/<line-height>]?<font-family>
eg:font:italic bold 20px/1.5 Arial,"微软雅黑";
实际编程练习中遇到的问题:
题目要求font属性用简写方式写:文字加粗,样式是斜体,字体变形,运行如下图:

出现错误,所以必须就是要有一个完整的后面的行高和字体类型都必须设置才可以吗?但是有些题目没有行高和字体的要求,这种情况应该怎么办?
成功的代码:

还有请问就是把颜色可以合成到font合成属性的这个中吗?

阅读 958
avatarAI BotBETA

在CSS中,font属性是一个复合属性,可以用来设置font-stylefont-variantfont-weightfont-sizeline-heightfont-family这些单独的属性值。

当你使用简写形式来设置font属性时,你需要按照以下顺序:

font: font-style font-variant font-weight font-size/line-height font-family;

你给出的例子中,你尝试设置字体样式为斜体(italic),字体变体(font variant)为小型大写字母(small-caps),字体粗细(font weight)为粗体(bold),字体大小(font size)为20px,行高(line height)为1.5,和字体族(font family)为Arial或"微软雅黑"。这是正确的顺序。

如果你不设置某些属性,例如行高或字体族,那么它们的默认值会被使用。例如,如果没有指定行高,那么行高将默认为normal。如果没有指定字体族,那么将默认为通用字体族(generic family)。

关于颜色,CSS的font属性并不包括颜色。颜色通常通过color属性来设置。你不能将颜色包含在font属性中。如果你需要设置文本的颜色,你需要单独使用color属性。例如:

p {
    font: bold italic 20px/1.5 Arial,"微软雅黑";
    color: red;
}

这段代码将使段落文本变为红色,同时应用了斜体、粗体和Arial或"微软雅黑"字体。

2 个回答

这块内容直接看 font 属性的文档就可以知道了 👉 https://developer.mozilla.org/zh-CN/docs/Web/CSS/font

If font is specified as a shorthand for several font-related properties, then:
如果 font 指定为多个字体相关属性的简写,则:

it must include values for:
必须包含以下值:

  • <font-size>
  • <font-family>

如果单纯要求设置文字 加粗斜体,单独书写对应的CSS属性即可

p {
    font-weight: bold;
    font-style: italic;
}

关于 font 属性的话,在 CSS 的手册文档里有很明确的说明了
image.png

所以,报错的原因也很简单,缺少 font-sizefont-family 这两个属性。

而你的题目没有要求设置这个,那么就分开写,不要写 font 属性,而是把每个属性单独列出来。

然后就是那个颜色是不是可以合成到 font 中,这个问题在文档中也描述了,并没有说文字颜色可以放到这个里面。如果你不想在当前标签里写 color,那就不要写了,颜色是可以继承父级元素的颜色,就写到父级元素中去吧。O(∩_∩)O哈哈~

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题