视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
Google不支持小于12px字体终极办法_html/css
2020-11-27 15:55:57 责编:小采
文档


每个浏览器厂商都会自己有设计的主观性,而这些出发点看似很好的却往往深深地伤害程序员。

1.需求

呈现指定为Google浏览器,字号为6-8px(为了打印细小的尺寸)。

2.探索

2.1 CSS HACK

搜索了N多的网页,都指向一个结果:

html

{ -webkit-text-size-adjust:none;}

将以上代码放在文档的开始。。

可,就是,不生效。。结果就有不良??说话语气粗拙、脸红、眼瞪等一系列的反应。

2.2 CSS 3 的春天

刚好带了一本书,是讲CSS3的特性的,快速浏览了整本书之后,发现了一个特性:

div { transform:scaleY(0.8);}

? ?对指定的标签进行缩放,比如,上述代码的意思就是,对div及其子元素(包括文本,也就包括字号)的高度(Y)放小到80%。

类似的,宽度放缩:scaleX(pre),整体放缩scale(pre)。

尝试之下,确实能够放缩。

可是,如果HTML是这样的话:

your textyour text2

那么在d1和d2之间将会出现很大的留白,怎么却掉这个留白呢?

两条铁律:

{ margin-top:-12px; padding-bottom:-12px;}

使用marin的负值,可以向指定方向移动外边距,即元素整体;

使用padding的负值,可以向指定的方向移动内边距,即撑大元素体;

之后,缩小的文本没哟发生变化,那么就达到了效果??在Google浏览器缩小字体,且像正常一样的执行。

3.总结

transform实际是计算机图形学的一个实现,有2D变换,3D变换等。

基础很重要,每一次努力都不会白费的~。

下载本文
显示全文
专题