字体样式 | CSS-Tricks 中文

CSS 年鉴 → 属性 → F → font-style

Louis Lazaris 于 2017 年 2 月 23 日

font-style 属性允许您使文本显示为斜体（即倾斜或倾斜）。

em {
  font-style: italic;
}

此属性接受三个可能值之一：normal、italic 和 oblique。

如果给定的字体家族具有嵌入的斜体或倾斜字体，则浏览器将选择该字体。如果不存在斜体或倾斜字体，则浏览器将模拟倾斜效果。如果定义了斜体并且不存在斜体字体，则浏览器将在尝试模拟斜体之前查找倾斜字体。斜体也一样；它也会首先查找斜体字体。

要防止浏览器添加斜体或倾斜字体的模拟或合成版本，您可以使用 font-synthesis 属性（如果支持）。

斜体与倾斜

根据规范，“斜体形式通常是草书性质的，而倾斜字体通常是常规字体的倾斜版本。”但是，如果所使用的字体没有斜体或倾斜字体可用，在大多数情况下，斜体和倾斜之间几乎没有区别。

下面的演示展示了斜体和倾斜。

查看 CodePen 上 CSS-Tricks 的示例斜体与倾斜使用 CSS font-style (@css-tricks)。

其他资源

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
有效	有效	有效	有效	有效	有效	有效

Chase Dickinson

# 2014 年 11 月 14 日

嗨，我的斜体在外部 CSS 中不起作用，
样式表

body{
background-color: #FF0099;

p.normal {
    font-style: normal;

}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

我的网站

3 movies
Tommy Boy with Chris Farley, Anchorman: the Legend of Ron Burgundy, with Will Ferral, and Dumb and Dumber, with Jim Carrey




 Tommy Boy is about, his dad's (Who died) business Callahan Auto parts is going out of busniess and Tommy is trying to save the business and sells Zalinski buys 500,000 break-pads to keep in business. Directored by Peter Segal. I would give this movie a 10 out of 10. Due to Chrisa Farley and his comedy in this movie is genuis.

 Anchorman is about Rob and his News Team. There is a girl journalist and she is trying to take Rob's job and Rob ends up getting fired. She becomes Anchor. In the end They co-anchor each other in the News for the World. Directored by Adam McKay. I would rate this movie a 9 out of 10 due to Will fereel going over the top. It ain't a 10 because Steve Caroll gets a gernade. That is dangerous.

 Dumb and Dumber is about Lloyd is trying to find the girl of his dreams because she left a brief case behind. Directored by Peter Farrelly and Bobby Farrelly. I would rate my movie a 9 out of 10 due to Jim Carrey and Jeff Daniels going out and trying to be kids again. It isn't a 10 due to the fact that it is really dumb.

我该怎么办？
我的电子邮件
[email protected]

Kieran

# 2014 年 12 月 6 日

您的 body 标签缺少它的结束括号。尝试

body{
    background-color: #FF0099;
}

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

Geej Mauriva

# 2015 年 8 月 7 日

嗨，
我把这段代码
em {
font-style: italic;
}

放在我网站上的外部 CSS 表中：http://alaskahealer.com/services/

这是页面上的 HTML 代码：无预约。仅限预约。
它在 Safari 和 IE 11 中没有显示为斜体

CodePen：http://codepen.io/anon/pen/rVRVQm

你知道为什么吗？

Geej

Louis

评论永久链接# 2015 年 8 月 7 日
嗨 Geej，

发生这种情况的原因是您使用的是名为“Muli”的字体，它是这样一种字体

http://www.fontsquirrel.com/fonts/muli

这只是普通的 Muli 字体。它似乎没有斜体版本，它只是普通的。如果将 CSS 更改为以下内容，它将起作用
```
em {
    font-style: italic;
    font-family: "muli italic", sans-serif;
}
```
或者其他任何包含“muli 斜体”版本字体的方法。

Margaret Munnelly

# 2016 年 5 月 22 日

我无法更改我的电子邮件字体——变粗了。

posthumanist

# 2018 年 2 月 3 日

嗨！Louis，我想对普通段落文本使用 Menlo，但对斜体文本和 H1 H2 等使用不同的字体（Arial），但我似乎无法弄清楚代码。你能给我指点方向吗？
非常感谢
johannes

Louis Lazaris

评论永久链接# 2018 年 2 月 4 日
您必须在 CSS 中定义它。
```
p {
  font-family: Menlo, sans-serif;
}

h1, h2, em {
  font-family: Arial, sans-serif;
}
```
这是一种方法，但这取决于您的样式表中的其他内容。

# 2018 年 2 月 4 日

谢谢 Louis！

字体样式

# 2018 年 7 月 12 日

当我在 WordPress 主题 CSS 中使用时，它总是显示为粗体。我也尝试了 !Important。但仍然一样。有人知道吗？它不是 main style.css*。

斜体与倾斜

相关属性

其他资源

浏览器支持

评论

发表回复 取消回复

发表回复取消回复