zoukankan      html  css  js  c++  java
  • Google不支持小于12px字体 终极办法

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

    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是这样的话:

    <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变换等。

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

  • 相关阅读:
    MySQL:如何查询出每个分组中的 top n 条记录?
    架构图解
    Jmeter(四十七)_性能测试统计超时率
    修改Docker容器启动配置参数
    Docker容器CPU、memory资源限制
    jmeter(四十六)参数化与断言实战
    jmeter(四十五)常用Beanshell脚本
    jmeter(四十四)常用性能指标分析
    linux性能监控常用命令
    jmap -heap 查看堆内存
  • 原文地址:https://www.cnblogs.com/pengzhen/p/3996227.html
Copyright © 2011-2022 走看看