Google不支持小于12px字体 终极办法_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:57:05
原创
1217人浏览过

 

立即学习前端免费学习笔记(深入)”;

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

 

立即学习前端免费学习笔记(深入)”;

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%。

办公小浣熊
办公小浣熊

办公小浣熊是基于商汤大语言模型的原生数据分析产品,

办公小浣熊 77
查看详情 办公小浣熊

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

 

立即学习前端免费学习笔记(深入)”;

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

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

<div id="d1">your text</div><div id="d2">your text2</div>
登录后复制

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

两条铁律:

{     margin-top:-12px;               padding-bottom:-12px;}
登录后复制

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

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

 

立即学习前端免费学习笔记(深入)”;

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

3.总结

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

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

相关标签:
HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号