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

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. Protocol Buffers介绍

    基本概念 Protocol Buffers(以下简称PB)是一种独立于语言.独立于开发平台.可扩展的序列化数据结构框架,它常常被用在通信.数据序列化保存等方面. PB是一种敏捷.高效.自动化的用于对数 ...

  2. PHP使用CURL上传|下载文件

    CURL下载文件 /** * @param string $img_url 下载文件地址 * @param string $save_path 下载文件保存目录 * @param string $fi ...

  3. HDOj 1010 DFS优化

    #include<cstdio> #include<cstring> ]={,,,-}; ]={,,-,}; ][]; int x1,y1,x2,y2; int step; i ...

  4. Tornaod框架

    Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google 的 webapp,不过为了能有效 ...

  5. PHPNG (next generation)

    PHPNG (next generation) This page gives short information about development state of a new PHP branc ...

  6. TCP/IP详解学习笔记(5)-- ICMP:internet 控制报文协议

    1.概述      ICMP是(Internet Control Message Protocol)Internet控制报文协议.它是TCP/IP协议族的一个子协议,用于在IP主机.路由器之间传递控制 ...

  7. TestPointer

     C++ Code  12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 ...

  8. Java for LeetCode 152 Maximum Product Subarray

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  9. AngularJS学习笔记1

    简介 AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使 ...

  10. WINDOWS xp用户账户怎么没了怎么办?

    这是因为系统的一个默认设置!新建用户会把管理员用户隐藏!只是修改了里面的注册表!在运行(windows徽标+R)里输入“regedit”可以打开注册表编辑器,定位到“HKEY_LOCAL_MACHIN ...