快速开始 主题配置
容器
布局 Layout 容器 Docker 定位 Position 外边距 Margin 内边距 Padding 溢出 Overflow
元素
颜色 Color 文字 Font 图标 Icon 图片 Image 按钮 Button 提示 Tip 标签 Tag 徽标 Badge 表格 Table 菜单 Menu 面包屑 Breadcrumb 选项卡 Tab 分页 Pagination 阴影 Shadow
组件
表单 Form 输入框 Input 文本域 Textarea 单选框 Radio 多选框 Checkbox 选择器 Select 计数器 Counter 折叠面板 Collapse 模态框 Modal 动画 Animation
作者
问题反馈

文字 Font

概述

JUI CSS 对字体进行了统一规范,意求在不同平台和浏览器下能显示出其最佳的效果。我们推荐MacOSiOS优先的策略,在不支持苹方字体的情况,使用备用字体。

字体

字体同时兼容WindowsMac OSiOSAndroidLinux多平台。

Helvetica, Tahoma, Arial,"PingFang SC",STXihei,"Microsoft yahei", "WenQuanYi Micro Hei",sans-serif
字号

JUI默认所有标签字号的粗细为normal

名称 标签 粗细 字号
主标题 h1 normal --largeTitleSize
大标题 h2 normal --mediumTitleSize
中标题 h3 normal --TitleSize
小标题 h4 normal --smallTitleSize
特殊大标题 h5 normal --TitleSize
特殊小标题 h6 normal --mediumSize
字号的用法和示例

Font-family对全文本有效,字号仅对class="j-content"内的内容有效,内容区基本字号font-size:16px,即1em=16px

<div class="j-content">
    <h1>H1 主标题</h1>
    <h2>H2 大标题</h2>
    <h3>H3 中标题</h3>
    <h4>H4 小标题</h4>
    <h5>H5 特殊大标题</h5>
    <h6>H6 特殊小标题</h6>
    <p>P 正文默认段落文本 1em = 16px</p>
</div>

H1 主标题

H2 大标题

H3 中标题

H4 小标题

H5 特殊大标题
H6 特殊小标题

P 正文默认段落文本 1em = 16px

文字属性

JUI中,文字属性包含文字粗细和字体样式。

字体粗细 设置类j-is-*来定义文字的字体粗细,*为粗细状态值,包括3种:normal正常、lighter细、bold粗。

字体样式 设置类j-is-*来定义文字的字体样式,*为样式状态值,包括3种:normal正常、italic斜体、oblique倾斜。

文本对齐

设置类j-is-*来定义文字的文本对齐方式,*为文本对齐状态值,包含3种:center居中对齐、left居左对齐、right居右对齐。

自定义文字大小

JUI预设了32个文字属性,属性值范围从10到100,尺寸值范围从1rem到10rem。你可以通过设置自定义属性font="*"的方式来定义文字大小,*为属性值。如:

<p font="14">我是font="14"</p>
<p font="20">我是font="20"</p>
<p font="30">我是font="30"</p>

我是font="14"

我是font="20"

我是font="30"

属性值 尺寸值
10 1rem
11 1.1rem
12 1.2rem
13 1.3rem
14 1.4rem
15 1.5rem
16 1.6rem
17 1.7rem
18 1.8rem
19 1.9rem
20 2rem
22 2.2rem
24 2.4rem
26 2.6rem
28 2.8rem
30 3rem
32 3.2rem
34 3.4rem
36 3.6rem
38 3.8rem
40 4rem
42 4.2rem
44 4.4rem
46 4.6rem
48 4.8rem
50 5rem
52 5.2rem
54 5.4rem
56 5.6rem
58 5.8rem
60 6rem
100 10rem
上一章:颜色 Color
下一章:图标 Icon