安卓移动端line,css行高和字号

作者:亚搏app官网    发布时间:2020-02-09 19:41    浏览:63 次

[返回]

时间: 2018-01-27阅读: 12175标签: 居中

1. 行高

CSS中,所有的行都有行高。盒模型的padding并不是直接作用在文字上,而是作用在“行”上。

行高格式:

line-height:40px;

文字是在自己的行里居中的。比如,文字字号14px,行高24px。那么为了严格保证字在行里面居中,那么行高、字号一般都是偶数。这样,它们的差就是偶数,就是够被2整除。

目前在移动端安卓手机上使用line-height属性,让它的值等于height,结果发现是不居中的。出现了一定位置的偏移情况,如果略微只有两三个像素差距是看不出来的。

2. 单行文本垂直居中

文本在行里面居中

公式:

行高:盒子高;

图片 1

图1

行高=盒子高。只适用于单行文本垂直居中!!不适用于多行,如果想让多行文本垂直居中,需要设置盒子的padding:

图片 2

图2

左图中的字号是12px,右图中的行高是26px。仔细观察过上图后,闲话少扯,直接说说我对这个android上line-height问题的一些看法:

3、font属性

·使用font属性,能够将字号、行高、字体,能够一起设置。

font:14px/24px "宋体";

等价于三行语句:

font-size:14px;

line-height:24px;’

font-family:“宋体”;

font-family就是“字体”。

注意:网页中不是所有的字体都能用,能不能用取决于用户的电脑里有没有装该字体。如果没有该字体,就默认变成“宋体”。

页面中,中文只使用:微软雅黑、宋体、黑体。如果页面中需要其他的字体,那么需要切图。

英语:Arial、Times New Roman

备选字体可以有无数个,用逗号隔开。

格式:font-family:“微软雅黑”,“宋体”

如果有英文字体,就要将英文字体放在最前面,这样所有的中文,就不能匹配英语字体,就自动的变为后面的中文字体:

格式:font-famliy:"Times New Roman","微软雅黑","宋体";

所有的中文字体,都有英文别名:

微软雅黑:Microsoft YaHei

宋体:SimSum

·行高可以用百分比,表示字号的百分之多少。一般行高都大于100%。

font:12px/200% “宋体”

等价于

font:12px/24px“宋体”

字体大小不要使用奇数字号,带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。尽量不要使用rem或者em的单位,除非你能对字号的把握在每个手机上都能达到第1条的要求。别外,微信小程序上的rpx是动态计算的,可以单独针对这部分使用px。一般只要不是边框贴着文字,一般都还看得过去,在接受的范围之内。如果是边框贴着文字,就是居中了,也不好看啊。

那么,对于小于12像素的居中或者是对居中要求很是严格的需求,这个问题怎么解决?

把字号内外边距等设置为需求大小的2倍,使用transform进行缩放。只能针对 单个或者是一排的布局进行缩放,如果是父级自适应高度且可展示多行的,使用transform是有问题的。因为transform缩放是不影响页面布局的。把字号内外边距等设置为需求大小的2倍,使用zoom进行缩放,可以完美解决。zoom原本只有ie支持,但现在除了Firefox,都已经支持了。是的,Firefox不支持。导致line-height偏移的本质原因 :作者:周祺,来源链接:是Android在排版计算的时候参考了primyfont字体的相关属性(即HHead Ascent、HHead Descent等),而primyfont的查找是看`font-family`里哪个字体在fonts.xml里第一个匹配上,而原生Android下中文字体是没有family name的,导致匹配上的始终不是中文字体,所以解决这个问题就要在`font-family`里显式申明中文,或者通过什么方法保证所有字符都fallback到中文字体。1.针对Android 7.0+设备:html上设置 lang 属性:html lang="zh-cmn-Hans",同时font-family不指定英文,如 font-family: sans-serif 。这个方法是利用了浏览器的字体fallback机制,让英文也使用中文字体来展示,blink早期的内核在fallback机制上存在问题,Android 7.0+才能ok,早期的内核下会导致英文fallback到Noto Sans Myanmar,这个字体非常丑。针对MIUI 8.0+设备:设置 font-family: miui 。这个方案就是显式申明中文的方案,MIUI在8.0+上内置了小米兰亭,同时在fonts.xml里给这个字体指定了family name:miui,所以我们可以直接设置。其它解决方法:1.添加border相关属性:

border: 1px solid transparent;box-sizing:border-box;

2.采用其它垂直居中方法:

来源:css样式——完美解决div水平居中及div水平垂直居中的方法总结

搜索