最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 15:55:57
文档

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

Google不支持小于12px字体终极办法_html/css_WEB-ITnose:每个浏览器厂商都会自己有设计的主观性,而这些出发点看似很好的却往往深深地伤害程序员。 1.需求 呈现指定为Google浏览器,字号为6-8px(为了打印细小的尺寸)。 2.探索 2.1 CSS HACK 搜索了N多的网页,都指向一个结果: html { -webki
推荐度:
导读Google不支持小于12px字体终极办法_html/css_WEB-ITnose:每个浏览器厂商都会自己有设计的主观性,而这些出发点看似很好的却往往深深地伤害程序员。 1.需求 呈现指定为Google浏览器,字号为6-8px(为了打印细小的尺寸)。 2.探索 2.1 CSS HACK 搜索了N多的网页,都指向一个结果: html { -webki


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

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

your textyour text2

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

两条铁律:

{ margin-top:-12px; padding-bottom:-12px;}

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

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

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

3.总结

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

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

文档

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

Google不支持小于12px字体终极办法_html/css_WEB-ITnose:每个浏览器厂商都会自己有设计的主观性,而这些出发点看似很好的却往往深深地伤害程序员。 1.需求 呈现指定为Google浏览器,字号为6-8px(为了打印细小的尺寸)。 2.探索 2.1 CSS HACK 搜索了N多的网页,都指向一个结果: html { -webki
推荐度:
标签: 字体 办法 谷歌
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top