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

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

时间: 2024-10-06 00:07:18

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

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

webkit的私有属性:{-webkit-text-size-adjust:none;} 但是,在最新版的谷歌里.已经不在支持这个属性啦. 用css3的transform:scale()缩放大小,但是缩放的宽度是不会改变的.所以额外加了个span标签, 又用了另外的 专门给chrome的样式 @media screen and (-webkit-min-device-pixel-ratio:0) { } 另外:火狐 @-moz-document url-prefix() { } #nav { w

怎么让Chrome支持小于12px 的文字

1.用图片:如果是内容固定不变情况下,使用将小于 12px 文字内容切出做图片,这样不影响兼容也不影响美观. 2.使用 12px 及 12px 以上字体大小:为了兼容各大主流浏览器,建议设计美工图时候设置大于或等于 12px 的字体大小,如果是接单的这个时候就需要给客户讲解小于12px 浏览器不兼容等事宜. 3.继续使用小于 12px 字体大小样式设置:如果不考虑 chrome 可以不用考虑兼容,同时在设置小于 12px 对象设置-webkit-text-size-adjust:none,做到最

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

谷歌浏览器Chrome是Webkit的内核,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即可实现字体大小不随终端设备或浏览器影响.CSS样式定义如下:-webkit-text-size-adjust:none; 但是在最新版的谷歌里.已经不在支持这个属性啦,需要通过css3的transform来解决,方法如下: css部分 html布局 body,p{ margin:0; padding:0;}p{font-size:10px;}span{-webkit

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

我们先来看个效果图(chrome下): 从上面的图可以很明显地看出Chrome下css设置字体大小为12px及以下时,显示的都是一样大小,都是默认12px: 那么网上有一个方法就是给当前样式添加Chrome私有属性:-webkit-text-size-adjust:none; 可是我进行验证后发现并无效果.后来查资料了解到在Chrome 27之后就取消了对这个属性的支持,那么我们应该如何设置Chrome下的字体呢? 可以利用css3的缩放属性:transform:scale() .small-f

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

先来看下 ie.火狐.谷歌浏览器下各个字体显示情况 ie下: 火狐下: 谷歌下: 从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时,显示都是一样大小,都是默认12px; 那么网上一直有一个方法就是给当前样式添加谷歌私有属性:-webkit-text-size-adjust:none; 可是我进行验证后发现,在谷歌现在的新版本里已经无效.那么我们应该如何设置谷歌下的字体呢? 我们可以使用到 css3里的一个属性:transform:scale() 属性介绍可以戳这里:http:

chrome浏览器小于12px字体的解决方案

第一种解决方案: 1.设置-webkit-text-size-adjust:none;  #chrome10px{      -webkit-text-size-adjust:none; font-size:10px; }: 第二种解决方案: #chrome10px{ font-size : 12px; -webkit-transform : scale(0.84,0.84) ; *font-size:10px; display:block; } 第三种解决方案: .small-font{ fo

Chrome下font-size小于12px的解决办法

自从Chorme取消了-webkit-text-size-adjust,这个问题又变得令人烦恼起来. 好在我们可以利用-webkit-transform这个私有属性. .box{ -webkit-transform:rotate(0.8)//我一般会调到0.7~0.8之间} 如果你的box有添加了一层背景,而你想改变的只是字体的大小,好吧,这个时候需要加一层标签: .box span{ -webkit-transform:rotate(0.8)//我一般会调到0.7~0.8之间} 当然,-web

chrome浏览器设置的最小字号是12px及浏览器设置调试小于12px字体

-webkit-transform-origin-x: 0; //X方向上缩放的中心点 -webkit-transform: scale(0.9); //缩放比例 transform: scale(0.9); 浏览器输入chrome://settings/fonts 原文地址:https://www.cnblogs.com/smallzhu/p/9568520.html

谷歌浏览器字体小于12px不能正常显示bug

google浏览器支持的最小字体是12px,当字体小于12px时还是只能显示12px: p{ font-size: 8px; -webkit-transform:scale(0.67); -webkit-transform-origin: 0 0 0; } 原文地址:https://www.cnblogs.com/jddk/p/8269120.html