CSS:line-height和vertical-align对DOM元素上下间隙的影响:
https://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/
(上面链接是张鑫旭大佬的文章)
问题:实现接近极限上下间隙的字体
最终效果
---- <- 这个是上边框
---- <- 这个是上边框
字体 => 字体
---- <- 这个是下边框
---- <- 这个是下边框
正确案例
其实font-size和line-height设置成相同的值就可以近乎实现接近极限上下间隙的字体,搞了一下午去计算,最后无意间试出来了。。。
scss函数实现如下:
/* 设置接近极限上下间隙字体 */
$mainFontSize: 16;
@mixin extremeFontSize($size) {
font-size: ($size * 2 + 10 ) / $mainFontSize + rem;
line-height: ($size * 2 + 10 ) / $mainFontSize + rem;
}
CSS实现如下:
/* 设置接近极限上下间隙字体 */
font-size: 16px; // 值可修改
line-height: 16px; // 值可修改
失败案例
/* 字体上下极致行高间隙
param:
- $size: 当前字体的rem值(如:1rem)
- $unit: 单位(rem)
根字体16px下的极限行高值为0.805
注意:极限行高值 = (12.88 / 全局字体大小rem) * 字体大小(rem) (实验是在全局根字体大小默认为14px下进行)
字体默认行高比例和字体比例略成正比,?疑是发散(只对chorme浏览器进行探究)-->
| (字体) (行高)
| 1rem = 1.571...rem
| 1.5rem = 2.357...rem
| 2rem = 3.214rem...rem
|.........
14px(font-size) -> 22px(line-height) -> 12.88px(extreme-line-height)
*/
// @mixin defaultFontSize($size, $unit) {
// font-size: ($size * 1 + 12) / $mainFontSize + $unit;
// line-height: (12.88 / $mainFontSize) * (($size * 2 + 10) / $mainFontSize) + $unit;
// }