谈谈网页中使用奇数字体和偶数字体

相信大多数人在开发中一开始被教导应该使用偶数字体多于奇数字体，但是并不懂其中的缘由。本人总结了一些大牛的看法和实践。

为何偶数居多？

1.比例关系

相对来说偶数字号比较容易和页面中其他部分的字号构成一个比例关系。如我使用14px的字体作为正文字号，那么其他部分的字体（如标题）就可以使用14×1.5 =21px的字体，或者在一些地方使用到了14×0.5=7px的padding或者margin，如果你是在用sass或者less编写css，这时候用处就凸显出来了。

2.UI设计师的缘故

大多数设计师用的软件如ps提供的字号是偶数，自然到了前端那边也是用的是偶数。

3.浏览器缘故

其一是低版本的浏览器ie6会把奇数字体强制转化为偶数，即13px渲染为14px。

其二是为了平分字体。偶数宽的汉字，如12px的汉子，去掉1像素的字体间距，填充了的字体像素宽度其实就是11px，这样的汉字中竖线左右是平分的，如“中”子，左右就是5px了。

4.系统差别

Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px 时用的是小一号的点阵（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

而在Linux和其他手持设备上，奇数偶数的渲染效果其实相差不大。

也可以使用奇数！！！

目前来说12，13，14，15，16px都是比较常用而且不错的字号，通过审查元素可以看到知乎的正文字号和豆瓣部分栏目（豆瓣电影）也是用了13px字号，效果都很不错。使用奇数号字体不好的地方是，文本段落无法对齐。

说到这里，有人会想起11px这个字号。那么关于这个这号，在谷歌中默认最小是12px字体，如果设置11px字体会渲染为12px字号，有人说通过设置css属性-webkit-text-size-adjust: none;来解决。本人实测失败，原因如下：

1.只对chrome27.0 版本以下有效，27.0以上版本无效；

2.只对英文才有效，对中文无效。

在新版的chrome中，已经禁止了改属性,建议使用CSS3中的方法:

transform:scale(0.7);

当使用transform:scale(0.7)时; 不仅是文字变小了，整个文字所在的容器也同时会变小，那么这时候可能就涉及到布局问题了，需要重新调整位置。

关于浏览器的支持的最小字体：

1.iphone6-plus、iphone5：微信、QQ直接打开、safari中字体可以从最1px字体开始；

2.小米2s：微信、QQ浏览器最小显示字体8px；自带浏览器最小字体从1px开始；

3.小米4s：firefox可以从最小字体1px开始；chrome中最小显示字体为12px；

4. pc： 360安全浏览器7：最小最示12px；firefox与ie10最小显示字体为1px。

详情可以参考：http://www.cnblogs.com/he-lian/p/4512276.html

谈谈网页中使用奇数字体和偶数字体相关推荐

//2.使用宏将一个数二进制中的奇数位和偶数为进行交换。 #includestdio.h #includestdlib.h #define EXH(x) \ ((x 0x5555555
//2.使用宏将一个数二进制中的奇数位和偶数为进行交换. 分析:提取偶数位:即让原数按位与01010101010101010101010101010101,16进制形式为0x55555555 提取奇数 ...
如何在网页中嵌入自己想要的字体(实例下载)
记得以前在国外那些人的网站看到那些字体怎么那么漂亮.而且不像电脑里面自带的字体.原来是通过这个方法来实现的.厉害,我觉得中文那些比较好看的字体,如果能都看到那该多好,不过看中文的TTF字体10M左右. ...
c语言while输入n求n个奇数,任意输入n个整数,输出这n个数中的奇数个数和偶数个数.用while语句...
C语言输入n并输入n个数,输出这n个数中的所有奇数的乘积 #includevoidmain(){inti,n,arr[100],mul=1;printf("请输入n值:");sc ...
如何在网页中嵌入自己想要的字体(推荐阅读)
字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...
java奇数偶数数组_在Java数组中将数组中的奇数置后偶数置前（两种不同的方法实现）...
问题:数组中将奇数置后偶数置前解决思路: 方法1. 使用双重for循环,一层从前往后找奇数,另一一层从后往前找偶数,如果找到了使用中间变量交换两个的值,最终实现偶数在前基数在后. 源代码: publ ...
html逐帧动画,谈谈网页中实现逐帧动画
前言我们在网页中经常需要一些动画效果,假如你的动画效果需要人为控制停止或者播放,我们一般就不会用gif来实现了!这里,就引出了我们今天讲到的逐帧动画!今天主要讲解几种方式来实现逐帧动画!大家可以根据 ...
c语言编写程序,输入正整数n,计算0到n以内所有奇数的和,c语言输入正整数n,计算1~n中的奇数和以及偶数和并输出....
用C语言编写程序,输入一个正整数n(1 #include"stdio.h"intmain(){\x09inti,j,n;\x09inta[12];\x09intmin,mx;\x0 ...
网页中使用任意字体之实际操作
之前对"在网页中嵌入非系统自带字体"做过一点研究,虽然技术上能实现,但是对国内来说,没有太大的实际意义,因为一个中文体文件起码20M+,而且各个浏览器支持的字体文件还都不一样,也就 ...
html5 在线字体库,网络字体@font-face，如何处理网页中的特殊字体？
网络字体@font-face 如何处理网页中的特殊字体 HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑.宋体.黑体已经越来越难以满足设计的需要,那么,如何在网站中使 ...

谈谈网页中使用奇数字体和偶数字体

谈谈网页中使用奇数字体和偶数字体相关推荐

最新文章

热门文章