文江博客开发文档 EST 中文文档文章详情

文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

typography

发布于 2023-10-15 18:11:42 字数 17262 浏览 0 评论 0 收藏 0

文字排版相关功能。

依赖于：

variables
util

.font-family()
调用预设样式设定文字的字体族。
- .font-family(@type)
  @type
  预设字体类型，可取值为 base / heading / code，分别对应普通文本、标题、代码。
```
pre code {
.font-family(code);
}
```
```
pre code {
font-family: Monaco, Consolas, monospace;
}
```
.ellipsis()
省略号样式，当文字超过容器宽度时，超出部分文字隐藏并显示省略号。
- .ellipsis()
```
.cell {
width: 120px;
.ellipsis();
}
```
```
.cell {
width: 120px;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
```
- .ellipsis(@line-number)
  限定最多显示的行数，超出部分隐藏并显示省略号。
  @line-number
  最多显示的行数。
```
.news {
width: 300px;
.ellipsis(3);
}
```
```
.news {
width: 300px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
```
  限制超出指定行数截断的功能只在 WebKit 内核浏览器下有效。

`.force-wrap()`

强制换行，阻止长字符串（例如 URL 或很长的连续英文字符）打破布局。

.comment {
.force-wrap();
}

.comment {
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: -moz-pre-wrap;
white-space: -hp-pre-wrap;
word-wrap: break-word;
}

.hide-text()
用于隐藏元素内文字，一般在文字隐藏之后使用背景图片替代显示。如果使用此 mixin 的元素是 inline-block 元素，请确保为其设置宽度。
```
.logo {
.hide-text();
}
```
```
.logo {
text-indent: -9999px;
overflow: hidden;
text-align: left;
}
```
.invisible()
用于隐藏整个元素，一般处理那些仅仅用于增加可访问性的文字或元素。
```
.screen-reader-notes {
.invisible();
}
```
```
.screen-reader-notes {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
*clip: rect(1px 1px 1px 1px);
}
```
了解更多相关内容可以参考 Using CSS clip as an Accessible Method of Hiding Content。

`.img-replace()`

用图片替换文字，通常用作图标的样式。

`.img-replace(@img-url, @img-x, @img-y)`

@img-url: 字符串格式的背景图片路径。可以是路径字符串，也可以是 url() 表达式。
@img-x: 背景图 background-position 的水平方向位置。可选，默认值：0。
@img-y: 背景图 background-position 的垂直方向位置。可选，默认值：0。

.logo-one {
.inline-block();
.img-replace("http://www.baidu.com/img/bdlogo.gif");
width: 270px;
height: 129px;
}

.logo-two {
.inline-block();
.img-replace(url("../logo.gif"));
width: 270px;
height: 129px;
}

.logo-one {
display: inline-block;
*display: inline;
*zoom: 1;
text-indent: -9999px;
overflow: hidden;
text-align: left;
background: url(http://www.baidu.com/img/bdlogo.gif) no-repeat 0 0;
width: 270px;
height: 129px;
}

.logo-two {
display: inline-block;
*display: inline;
*zoom: 1;
text-indent: -9999px;
overflow: hidden;
text-align: left;
background: url(../logo.gif) no-repeat 0 0;
width: 270px;
height: 129px;
}

当 Less 编译时开启了 --relative-urls（-ru）时，直接输入字符串路径很可能得到非预期的结果。此时需要使用 url() 表达式来提供参数。

.font-size-rem()
用于将 px 单位的字体大小转换为 rem 单位。依赖于 @default-font-size，请确保 <HTML> 标签的字体大小与 @default-font-size 一致。
- .font-size-rem(@px-size)
  @px-size
  以 px 为单位的字体大小。可以是纯数字（如 14）也可以是带 px 单位的值（如 14px）。
```
.text {
.font-size-rem(32px);
}
```
```
.text {
font-size: 32px;
font-size: 2rem;
}
```
.font-size-em()
用于将 px 单位的字体大小转换为 em 单位。依赖于 @default-font-size，请确保 <HTML> 标签的字体大小与 @default-font-size 一致。
- .font-size-em(@px-size, @context-font-size)
  @px-size
  以 px 为单位的字体大小。可以是纯数字（如 14）也可以是带 px 单位的值（如 14px）。
  @context-font-size
  上下文的字体大小，格式与 @px-size 一致。可选，默认值：@default-font-size。
```
.text {
.font-size-em(24px);
}
```
```
.text {
font-size: 1.5em;
}
```
.font-face()
用来方便地使用 @font-face 定义 web 字体。
- .font-face(@family-name, @font-path, @font-weight, @font-style, @include-svg)
  @family-name
  字体族的名称。
  @font-path
  字体的路径。可以是路径字符串，也可以是 url() 表达式。
  @font-weight
  字重。可选，默认值：normal 。
  @font-style
  字体的风格。可选，默认值：normal 。
  @include-svg
  是否使用 svg 格式的字体。可取 true 或 false。可选，默认值：false。
```
.font-face("FamilyName", "/some/font/url");
```
```
@font-face {
font-family: "FamilyName";
src: url(/some/font/url.eot);
src: url(/some/font/url.eot?#iefix) format("embedded-opentype"),
url(/some/font/url.woff) format("woff"),
url(/some/font/url.ttf) format("truetype");
font-weight: normal;
font-style: normal;
}
```
  当 Less 编译时开启了 --relative-urls（-ru）时，直接输入字符串路径很可能得到非预期的结果。此时需要使用 url() 表达式来提供参数。

`.hover-link()`

用于实现链接默认无下划线，hover后有下划线的样式。

a {
.hover-link();
}

a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

`.unstyled-link()`

用于将链接变成默认的文字样式。

.plain-link {
.unstyled-link();
}

.plain-link {
color: inherit;
text-decoration: inherit;
cursor: inherit;
}

.plain-link:active,
.plain-link:focus {
outline: none;
}

.drop-cap()
用于实现首文字下沉样式。
- .drop-cap(@line-height, @lines, @margin-right)
  @line-height
  行高。单位可选% / px / em，或者直接使用缩放因子如 2。
  @line-number
  下沉的行数。可选，默认值：2。
  @margin-right
  下沉文字与普通文字的间隔。可选，默认值：1em（相对普通文字大小计算）。
  @margin-right 直接设为 1em 时为相对下沉文字的字体大小，不设会自动转换为相对普通文字字体大小的 1em。
```
article p {
line-height: 24px;
.drop-cap(24px);
}
```
```
article p {
overflow: hidden;
line-height: 24px;
}

article p:first-letter {
float: left;
margin-right: 0.5em;
font-size: 2em;
line-height: 24px;
line-height: 48px;
}
```
.drop-cap-inline()
用于实现多字下沉样式。
- .drop-cap-inline(@line-height, @lines, @margin-right)
  @context-line-height
  所处环境的行高。单位可选% / px / em，或者直接使用缩放因子如 2。
  @line-number
  下沉的行数。可选，默认值：2。
  @margin-right
  下沉文字与普通文字的间隔。可选，默认值为相对普通文字大小的 1em。
  @margin-right 直接设为 1em 时为相对下沉文字的字体大小，不设会自动转换为相对普通文字字体大小的 1em。
```
<p>
<span class="drop">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit. Nesciunt, eos, beatae error quaerat blanditiis repudiandae laudantium debitis officiis veritatis quasi dicta deserunt quo ipsum. Excepturi numquam nesciunt voluptates veniam eligendi.
</p>
```
```
p {
line-height: 24px;

.drop {
.drop-cap-inline(24px, 2);
}
}
```
```
p {
line-height: 24px;
}

p .drop {
float: left;
margin-right: 0.5em;
font-size: 2em;
line-height: 24px;
line-height: 48px;
}
```
.rhythm()
用于按照“垂直的旋律”来排版文字，适合中文阅读。规范化作用域内所有块级元素的上下边框、行高、字体大小，一般用于多段文字（文章）的显示。
- .rhythm(@font-size, @line-height)
  @font-size
  字体大小。
  @line-height
  行高。
.rhythm() 可结合下面的 mixin 更灵活地使用（这些 mixin 必须在已经使用了 .rhythm() 的作用域下使用）。下面所述的基础高度为 line-height 的一半。
- .rhythm-line-height(@lines)
  设置行高倍数。
  @lines
  行高相对于基础行高的倍数。
- .rhythm-margin(@lines)
  设置上下外边距高度。
  @lines
  外边距相对基础高度的倍数。
- .rhythm-margin-top(@lines)
  设置上外边距高度。
  @lines
  上外边距相对基础高度的倍数。
- .rhythm-margin-bottom(@lines)
  设置下外边距高度。
  @lines
  下外边距相对基础高度的倍数。
- .rhythm-padding(@lines, @border)
  设置上下内边距高度。
  @lines
  内边距相对基础高度的倍数。
  @border
  上下边框样式，格式与 CSS border 属性相同。可选，默认值：false，此时没有边框。
- .rhythm-padding-top(@lines, @border)
  设置上内边距高度。
  @lines
  上内边距相对基础高度的倍数。
  @border
  上边框样式，格式与 CSS border 属性相同。可选，默认值：false，此时没有边框。
- .rhythm-padding-bottom(@lines, @border)
  设置下内边距高度。
  @lines
  下内边距相对基础高度的倍数。
  @border
  下边框样式，格式与 CSS border 属性相同。可选，默认值：false，此时没有边框。
```
.entry {
.rhythm(14px, 2);
blockquote {
.rhythm-margin(1);
.rhythm-padding(1, 1px solid #CCC);
}
p {
.rhythm-line-height(2);
.rhythm-margin(2);
.rhythm-padding(2);
}
}
```
```
.entry {
font-size: 14px;
line-height: 2;
}

.entry h1,
.entry h2,
.entry h3,
.entry h4,
.entry h5,
.entry h6,
.entry div,
.entry p,
.entry section,
.entry header,
.entry footer,
.entry article,
.entry ul,
.entry ol,
.entry pre,
.entry table,
.entry figure {
line-height: 28px;
margin-top: 14px;
margin-bottom: 14px;
padding: 0;
}

.entry h1 {
line-height: 56px;
}

.entry h1 {
font-size: 28px;
}

.entry h2 {
font-size: 21px;
}

.entry h3 {
font-size: 16.8px;
}

.entry h4,
.entry h5,
.entry h6 {
font-size: 14px;
}

.entry blockquote {
margin-top: 14px;
margin-bottom: 14px;
padding-top: 13px;
padding-bottom: 13px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}

.entry p {
line-height: 56px;
margin-top: 28px;
margin-bottom: 28px;
padding-top: 28px;
padding-bottom: 28px;
}
```
.centered-line()
用于设置单行文本垂直居中。
- .centered-line(@height)
  @height
  行高。
```
pre code {
.centered-line(24px);
}
```
```
pre code {
height: 24px;
line-height: 24px;
}
```
- .centered-line(@height, @is-input)
  @height
  行高。
  @is-input
  相关元素是否为输入框。
```
pre code {
.centered-line(24px, true);
}
```
```
pre code {
height: 24px;
line-height: 24px\0;
}
```
  WebKit 下文本输入框中的文字会自动垂直居中，如果设置了 line-height 反而会使光标、选区的高度显示不正常。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

typography

`.font-family()`

`.font-family(@type)`

`.ellipsis()`

`.ellipsis()`

`.ellipsis(@line-number)`

`.force-wrap()`

`.hide-text()`

`.invisible()`

`.img-replace()`

`.img-replace(@img-url, @img-x, @img-y)`

`.font-size-rem()`

`.font-size-rem(@px-size)`

`.font-size-em()`

`.font-size-em(@px-size, @context-font-size)`

`.font-face()`

`.font-face(@family-name, @font-path, @font-weight, @font-style, @include-svg)`

`.hover-link()`

`.unstyled-link()`

`.drop-cap()`

`.drop-cap(@line-height, @lines, @margin-right)`

`.drop-cap-inline()`

`.drop-cap-inline(@line-height, @lines, @margin-right)`

`.rhythm()`

`.rhythm(@font-size, @line-height)`

`.rhythm-line-height(@lines)`

`.rhythm-margin(@lines)`

`.rhythm-margin-top(@lines)`

`.rhythm-margin-bottom(@lines)`

`.rhythm-padding(@lines, @border)`

`.rhythm-padding-top(@lines, @border)`

`.rhythm-padding-bottom(@lines, @border)`

`.centered-line()`

`.centered-line(@height)`

`.centered-line(@height, @is-input)`

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

typography

.font-family()

.font-family(@type)

.ellipsis()

.ellipsis()

.ellipsis(@line-number)

.force-wrap()

.hide-text()

.invisible()

.img-replace()

.img-replace(@img-url, @img-x, @img-y)

.font-size-rem()

.font-size-rem(@px-size)

.font-size-em()

.font-size-em(@px-size, @context-font-size)

.font-face()

.font-face(@family-name, @font-path, @font-weight, @font-style, @include-svg)

.hover-link()

.unstyled-link()

.drop-cap()

.drop-cap(@line-height, @lines, @margin-right)

.drop-cap-inline()

.drop-cap-inline(@line-height, @lines, @margin-right)

.rhythm()

.rhythm(@font-size, @line-height)

.rhythm-line-height(@lines)

.rhythm-margin(@lines)

.rhythm-margin-top(@lines)

.rhythm-margin-bottom(@lines)

.rhythm-padding(@lines, @border)

.rhythm-padding-top(@lines, @border)

.rhythm-padding-bottom(@lines, @border)

.centered-line()

.centered-line(@height)

.centered-line(@height, @is-input)

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

`.font-family()`

`.font-family(@type)`

`.ellipsis()`

`.ellipsis()`

`.ellipsis(@line-number)`

`.force-wrap()`

`.hide-text()`

`.invisible()`

`.img-replace()`

`.img-replace(@img-url, @img-x, @img-y)`

`.font-size-rem()`

`.font-size-rem(@px-size)`

`.font-size-em()`

`.font-size-em(@px-size, @context-font-size)`

`.font-face()`

`.font-face(@family-name, @font-path, @font-weight, @font-style, @include-svg)`

`.hover-link()`

`.unstyled-link()`

`.drop-cap()`

`.drop-cap(@line-height, @lines, @margin-right)`

`.drop-cap-inline()`

`.drop-cap-inline(@line-height, @lines, @margin-right)`

`.rhythm()`

`.rhythm(@font-size, @line-height)`

`.rhythm-line-height(@lines)`

`.rhythm-margin(@lines)`

`.rhythm-margin-top(@lines)`

`.rhythm-margin-bottom(@lines)`

`.rhythm-padding(@lines, @border)`

`.rhythm-padding-top(@lines, @border)`

`.rhythm-padding-bottom(@lines, @border)`

`.centered-line()`

`.centered-line(@height)`

`.centered-line(@height, @is-input)`

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。