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

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

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

Google不支持小于12px字体 终极办法的更多相关文章

  1. CSS3 - chrome,傲游,360极速浏览器不支持小于12px的字号的解决办法

    google流量器chrome,傲游,360极速浏览器都是基于webkit内核浏览器,默认不支持小于font-size小于12px 的字号,即定义font-size小于12px时会发现字体大小依然是1 ...

  2. 如何让谷歌浏览器支持小于12px的字体

    CSS3有个新的属性transform,而我们用到的就是transform:scale() 书写一段代码 <body> <p>我是一个小于12PX的字体</p> & ...

  3. 谷歌浏览器支持小于12px的字体

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 【css】怎么让Chrome支持小于12px 的文字

    谷歌浏览器Chrome是Webkit的内核,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即可实现字体大小不随终端设备或浏览器影响.CSS样式定义如下:-web ...

  5. 使用css怎么让谷歌支持小于12px的文字比如10px

    1.小于12px的字体,如果内容固定,可以将内容切除做图片,没有兼容问题. 2.-webkit-text-size-adjust:none;老版本谷歌,27版本之后无用 3.-webkit-trans ...

  6. Chrome不支持css字体小于12px的解决办法

    我们先来看个效果图(chrome下): 从上面的图可以很明显地看出Chrome下css设置字体大小为12px及以下时,显示的都是一样大小,都是默认12px: 那么网上有一个方法就是给当前样式添加Chr ...

  7. Chrome谷歌浏览器下不支持css字体小于12px的解决办法

    先来看下 ie.火狐.谷歌浏览器下各个字体显示情况 ie下: 火狐下: 谷歌下: 从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px; 那么网上一 ...

  8. 让谷歌浏览器 chrome 支持小于12px的字体

    webkit的私有属性:{-webkit-text-size-adjust:none;} 但是,在最新版的谷歌里.已经不在支持这个属性啦. 用css3的transform:scale()缩放大小,但是 ...

  9. 移动端 设置 小于12px 字体 初探

    1.移动端字号规范 2. 百度字号调研 3. 绕过12px 限制 4. 缩放 5. chrome  字号

随机推荐

  1. Ubuntu 开机自启动工具 update-rd.d 使用详解

    常用命令: $ sudo update-rc.d nginx defaults      #增加服务 $ sudo update-rc.d -f nginx remove    #移除服务 Linux ...

  2. DLL注入之注册表

    0x00 唠叨 编写本系列文章纯属为了系统学习DLL注入的方法,所以很多方法可能已经过时,希望各位看官勿喷.当然若有更好的方法,希望不腻赐教.若本文有任何错的地方,也希望各位指正.谢谢! 0x01 适 ...

  3. tornado--之cookie自定义(还有session)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhAAAAHzCAIAAAD+WrNvAAAgAElEQVR4nOy993cTV7/vf/6qu865ob

  4. js 函数声明方式以及javascript的历史

    1.function  xx(){} 2.匿名方式   window.onload=function(){dslfjdslfkjdslf}; 3.动态方式  var demo=new Function ...

  5. 如何用BMFont制作图片字

    1: 运行程序,单击鼠标左键点亮相应位置的字母,比如:0.1.2./ 等2: 选择 Edit->Open Image Manager.弹出一个“Image Manager" 对话框3: ...

  6. iOS 一个工程中引用其他工程时要注意Skip Install选项

    当主工程引用其他工程,以便使用他们生成的库的时候,在发布时,主要注意这个选项.这个选项的说明如下 Activating this setting when deployment locations a ...

  7. 通过Java反射来理解泛型的本质

    集合框架中经常会使用泛型指定集合中所存放元素的类型,保证集合的统一性,从集合中取出元素的时候也避免了类型强制转换的操作,所以我们使用常规的方式来往集合中存放元素的时候,如果指定泛型,那么我们只能向集合 ...

  8. Maven无法引入自定义构件依赖的解决方案

    一般情况下,使用如下命令即可将自定义构件安装到本地仓库,供其他项目使用. mvn clean install 但是也有例外,今天我就分享一下我遇到问题,供相同遭遇的同学参考下. 我使用了父POM统一管 ...

  9. plsql查询数据显示为乱码解决方法

    使用plsql查询数据显示为乱码: 查看数据库编码: 通过网上搜索,发现需要设置环境变量,添加以下环境变量: LANG=zh_CN.GBK NLS_LANG="SIMPLIFIED CHIN ...

  10. PrincipalView的使用参数

    4 G:\PrincipalView\model\m426.off 注意,路径是绝对路径,所以如果程序移位的话,要注意修改: 路径中不能包含空格