CSS ascent-override descent-override line-gap-override基本效果实例页面

回到相关文章 »

效果：

ascent-override:100%

张鑫旭：介绍下@font-face 中 3 个与文字垂直排版距离相关的属性。
大家可以拖动下面的滑杆感受下不同值下的排版效果。

descent-override:0%

张鑫旭：介绍下@font-face 中 3 个与文字垂直排版距离相关的属性。
大家可以拖动下面的滑杆感受下不同值下的排版效果。

line-gap-override:80%

张鑫旭：介绍下@font-face 中 3 个与文字垂直排版距离相关的属性。
大家可以拖动下面的滑杆感受下不同值下的排版效果。

代码：

CSS代码：

.content {
    width: 280px; line-height: 30px;
    border-top: 1px solid #999;
    border-bottom: 1px solid #fff;
    box-shadow: inset 0 -1px #fff;
    background: repeating-linear-gradient(transparent 0 29px, #999 29px 30px);
}
.ascent {
    font-family: ascentFont;    
}
.descent {
    font-family: descentFont;    
}
.line-gap {
    font-family: lineGapFont;
    line-height: normal;
}
@font-face {
    font-family: ascentFont;
    src: local('xxx font');
    ascent-override: 100%;
}
@font-face {
    font-family: descentFont;
    src: local('xxx font');
    descent-override: 0%;
}
@font-face {
    font-family: lineGapFont;
    src: local('xxx font');
    line-gap-override: 80%;
}

HTML代码：

<h4>ascent-override:<output id="ascentOutput">100%</output></h4>
<div class="content ascent">...
    <input type="range" value="100" min="0" max="200" name="ascent" is="ui-range" data-tips="${value}%">
</div>

<h4>descent-override:<output id="descentOutput">0%</output></h4>
<div class="content descent">...
    <input type="range" value="0" min="0" max="200" name="descent" is="ui-range" data-tips="${value}%">
</div>

<h4>line-gap-override:<output id="lineGapOutput">80%</output></h4>
<div class="content line-gap">
    ...
    <input type="range" value="80" min="0" max="200" name="lineGap" is="ui-range" data-tips="${value}%">
</div>