跳过主要内容

排版

Worldsskills将Frutiger用作称赞Inria的主要字体作为衬线伴侣。

  • Worldsskills拥有这些字体的许可证，可在Worldskills.org上使用
  • 会员需要自己的许可证和在线使用这些字体的方式
  • 有关我们的字体的更多详细信息，请参阅我们的品牌书

内容

印刷量表

WorldSkills使用的量表假设用户的浏览器具有通常的1REM = 16px。

$ font-size-7xl：7.5REM！默认值;// 120
$ font-size-6xl：5.625REM！默认值;// 90
$ font-size-5xl：3.75REM！默认值;// 60
$ font-size-4xl：2.5REM！默认值;// 40
$ font-size-3xl：2rem！默认值;// 32
$ font-size-2xl：1.5em！默认值;// 24
$ font-size-xl：1.25REM！默认值;// 20
$ font-size-lg：1.125REM！默认值;// 18
$ font-size-base：1rem！默认值;// 16
$ font-size-sm：0.875REM！默认值;// 14

这将转换为标题如下：

H1

H2

H3

H4

H5
H6

可以标记标题，但使用CSS类更改大小，例如

带有H2大小的H1标题

身体副本

身体副本具有最大宽度，可以保持良好的衡量标准（文本线的长度）并确保可读文本。

例子

lorem ipsum dolor坐着，Consectetur adipiscing Elit。Maecenas commodoIaculis urna，非洛博尔蒂斯tortor Interdum。Libero Arcu Molestie毛里斯，NEC促进1麦格纳2SEMSED。NULLAFACILISI。Curabitur ac Cestibulum nisl。Morbi Hendrerit，Sapien Sit Amet Eleifend Ornare，Lectus Ante Semper Mauris，viverra purus ligulaNEC Tellus。

Eliquam a diam ac Ac augue interdum tincidunt。Donec et nunc eget sem venenatis iaculis。cras est lorem，超级vitae venenatis欧盟，累积了欧盟。Leo eu arcu Ultrics posuere的Pellentesque。

  1. 排序列表。cras faucibus enim quis turpis tempus，坐在armet tincidunt tellus Interdum。Curabitur nisi Tellus，Ullamcorper Quis pellentesque Quis，发酵罐DUI。
  2. Duis faucibus odio sed posuere iaculis。
  3. UT AC Libero Leo。

和这里的段落。

  • 无序列表。cras faucibus enim quis turpis tempus，坐在armet tincidunt tellus Interdum。Curabitur nisi Tellus，Ullamcorper Quis pellentesque Quis，发酵罐DUI。
  • Duis faucibus odio sed posuere iaculis。
  • UT AC Libero Leo。

和这里的段落。

立方体标题

使用样式> CUBE图标在编辑器中或添加CSS类之前，添加一个立方体在标题之前.ws-h-icon

H1带有立方体图标

带有立方体图标的H2

H3带有立方体图标

H4与立方体图标

带有立方体图标的H5
H6带有立方体图标

铅介绍

使用Concrete5编辑器中的样式>“引入”或“添加CSS类”中的引言较大。带领

例子

Eliquam a diam ac Ac augue interdum tincidunt。Donec et nunc eget sem venenatis iaculis。cras est lorem，超级vitae venenatis欧盟，累积了欧盟。Leo eu arcu Ultrics posuere的Pellentesque。

inria /衬线字体

使用Concrete5编辑器中的样式> serif字体更改文本或添加CSS类.text-serif

注意：我们正在使用衬线字体来缓解Frutiger，而不是替代品，因此只能很少使用它。

例子

Eliquam a diam ac Ac augue interdum tincidunt。

切勿使用“单击此处”进行链接。

  • “这里”隐藏了用户点击的内容
  • 避免仅使用动词作为锚
  • 尝试在链接上结束
  • 与用户单击链接，而无需说“单击此处”

有关更多信息，请阅读本文有关可访问和可用链接的文章来自粉碎杂志。

当链接具有异常的行为，例如链接现场或下载PDF时，我们应该警告用户。

例子

studica.com/worldskillsphspan class class class =“ sr-on-only”>（外部链接）））

此代码将警告屏幕读取器有关外部链接并添加图标：

Studica.com/worldskills（外部链接）

例子

当链接下载PDF时，请尝试告诉用户并指示文件有多大：

下载Worldskills Vision 2025（PDF，3.8MB）