Docs

Documentation versions (currently viewingVaadin 24)
Documentation translations (currently viewingChinese)

此页面是根据官方文档 (http://vaadin.com/docs) 的机器翻译,可能存在错误、不准确或误述。Vaadin 不对翻译的准确性、可靠性或及时性作任何保证或声明。

与文字显示和格式相关的Lumo样式属性表。

Lumo定义了一组与字体族、字体大小和行高相关的样式属性。您可以使用这些CSS自定义属性在整个应用程序中应用一致的排版样式。

您可以启用内置的Lumo紧凑模式变体,以减小字体大小和各个组件的尺寸与间距,从而在屏幕上放置更多组件。

Lumo 字体族

默认使用系统字体堆栈:

  • Windows 系统下使用 Segoe UI

  • Android 和 Chrome OS 使用 Roboto

  • macOS、iOS 和 iPadOS 使用 San Francisco

在其他系统上,Helvetica 和 Arial 将作为替代字体。

描述 CSS自定义属性

主字体
标题、正文及界面文本

--lumo-font-family:

Lumo 字体大小

可以使用以下字体大小。M 是标准大小,默认被大多数元素使用。

描述 CSS自定义属性

XXXL
标题文本

--lumo-font-size-xxxl:

XXL
标题文本

--lumo-font-size-xxl:

XL
标题文本

--lumo-font-size-xl:

L
标题文本

--lumo-font-size-l:

M
正文 /界面文本

--lumo-font-size-m:

S
标签文本

--lumo-font-size-s:

XS
帮助文本、字段验证提示文本、徽章

--lumo-font-size-xs:

XXS
小型徽章

--lumo-font-size-xxs:

Lumo 行高

可以使用以下行高值。 M 为标准大小,默认用于大多数元素。

描述 CSS自定义属性

M

--lumo-line-height-m:

S

--lumo-line-height-s:

XS

--lumo-line-height-xs:

5B833A4F-22A1-4628-97EF-32B1DF6C94CE