Movatterモバイル変換


[0]ホーム

URL:


  1. 面向开发者的 Web 技术
  2. CSS:层叠样式表
  3. CSS 参考
  4. At-rules
  5. @font-face
  6. font-style

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in EnglishAlways switch to English

font-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

font-style CSS 描述符允许作者为@font-face @ 规则中指定的字体指定字体样式。

对于特定字体家族,作者可以下载与同一字体家族的不同风格相对应的各种字体,然后使用font-style 描述符明确指定字体的风格。该 CSS 描述符的值与相应的font-style 属性的值相同。

语法

css
font-style: normal;font-style: italic;font-style: oblique;font-style: oblique 30deg;font-style: oblique 30deg 50deg;

normal

选择 font-family 的常规版本。

italic

指定 font-face 为普通字体的斜体版本。

oblique

指定 font-face 是普通字体的人工倾斜版本。

带有角度值oblique

选择被归类为oblique 的字体,并指定文字倾斜的角度。

带有角度范围的oblique

选择被归类为oblique 的字体,并指定文字倾斜角度的允许范围。请注意,只有当font-styleoblique 时,才支持范围;对于font-style: normalitalic,不允许使用第二个值。

形式定义

Relatedat-rule@font-face
初始值normal
计算值as specified

形式语法

font-style =
auto|
normal|
italic|
left|
right|
oblique[<angle [-90deg,90deg]>{1,2}]?

示例

指定斜体字体样式

以 garamond 字体家族为例,在其正常形式下,我们可以得到以下结果:

css
@font-face {  font-family: garamond;  src: url("garamond.ttf");}

未加额外样式的 Garamond

该文本的斜体版本使用与无样式版本相同的字形,但它们被人为地倾斜了几度。

人工倾斜的 Garamond

另一方面,如果存在字体家族的真正斜体版本,我们可以将其包含在src 描述符中,并将字体样式指定为斜体,这样就可以清楚地看到字体是斜体了。真正的斜体使用不同的字形,与正体有些不同,具有一些独特的特征,通常具有圆润的书法气质。这些字体是由字体设计师专门设计的,并不是人为倾斜的。

css
@font-face {  font-family: garamond;  src: url("garamond-italic.ttf");  font-style: italic;}

斜体 Garamond

规范

Specification
CSS Fonts Module Level 4
# font-prop-desc

浏览器兼容性

参见

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2026 Movatter.jp