CSS中,微软雅黑和Times New Roman 相同字号显示同一段中英文占用位置大小不一样吗? 15
本人新手小白,刚刚学习前端。我在仿写京东页面时有一个地方写了一个定宽160px的盒子,里面放了两个a标签转换为行内元素的块,内容有汉字有英文。宽度都是70,给相同的边框2...
本人新手小白,刚刚学习前端。
我在仿写京东页面时有一个地方写了一个定宽160px的盒子,里面放了两个a标签转换为行内元素的块,内容有汉字有英文。宽度都是70,给相同的边框2px,给两个amargin-right4px,按理说这两个块应该能并排放的,但是后面一个实际上被挤下去了,研究发现是宽度不够的缘故。但是按理说74+74+8=156,两个块中间还有默认的4px间距(这个我也不知道为什么会是4,反正测出来就是默认有4空隙)。加上这个4那也正好160,为什么大放不下呢?
嗨呀,为了查出来到底什么bug苦恼了很久,因为检查元素测不出来有什么问题,页面初始化也写了,不存在多余的内外边距问题。后来我发现,我仿写的那个京东页面(是别人写的不是京东原版),检查元素,在字体那一块,纯汉子的那个a就是微软雅黑字体,另一个有汉字有英文的a字体则优先是微软雅黑然后是Times New Roman,然后我怀疑是这个缘故,我的页面初始化里面字体没有声明,全是默认微软雅黑。我加了一下声明,优先新罗马然后微软雅黑。结果英文会自动显示新罗马了,然后两个块给4px右边距也能并排显示了。说明同样的字号。新罗马和微软雅黑处理英文时候,微软雅黑占的空间大?
但是既然微软也是标准字号(这里我是12px),为什么内容和盒子就有了大小冲突?实际开发中是不是在初始化中把需要用的字体先声明一遍?
我后来做实验单独写几个新页面,发现即便没有声明字体,火狐还是可以自动给汉字微软雅黑给英文新罗马的。妈蛋为什么我一开始那个页面就不行?我明明没声明字体啊,为什么默认只有微软雅黑没有新罗马?这个页面有毒? 展开
我在仿写京东页面时有一个地方写了一个定宽160px的盒子,里面放了两个a标签转换为行内元素的块,内容有汉字有英文。宽度都是70,给相同的边框2px,给两个amargin-right4px,按理说这两个块应该能并排放的,但是后面一个实际上被挤下去了,研究发现是宽度不够的缘故。但是按理说74+74+8=156,两个块中间还有默认的4px间距(这个我也不知道为什么会是4,反正测出来就是默认有4空隙)。加上这个4那也正好160,为什么大放不下呢?
嗨呀,为了查出来到底什么bug苦恼了很久,因为检查元素测不出来有什么问题,页面初始化也写了,不存在多余的内外边距问题。后来我发现,我仿写的那个京东页面(是别人写的不是京东原版),检查元素,在字体那一块,纯汉子的那个a就是微软雅黑字体,另一个有汉字有英文的a字体则优先是微软雅黑然后是Times New Roman,然后我怀疑是这个缘故,我的页面初始化里面字体没有声明,全是默认微软雅黑。我加了一下声明,优先新罗马然后微软雅黑。结果英文会自动显示新罗马了,然后两个块给4px右边距也能并排显示了。说明同样的字号。新罗马和微软雅黑处理英文时候,微软雅黑占的空间大?
但是既然微软也是标准字号(这里我是12px),为什么内容和盒子就有了大小冲突?实际开发中是不是在初始化中把需要用的字体先声明一遍?
我后来做实验单独写几个新页面,发现即便没有声明字体,火狐还是可以自动给汉字微软雅黑给英文新罗马的。妈蛋为什么我一开始那个页面就不行?我明明没声明字体啊,为什么默认只有微软雅黑没有新罗马?这个页面有毒? 展开
1个回答
展开全部
英文字体分两种,一种是等宽字体,另一种则是比例字体。Times New Roman是比例字体,所谓比例字体就是每个字母的宽度是不相等的,其中大写M最宽,小写i最窄。中文字体则全部都是等宽字体(包括其中包含的半角英文、字母和符号),其宽度等于同字号英文等宽字体的2倍。
因此,当中文与英文等宽字体混排时,其总宽度是可以根据字号和字数很方便地计算出来的,即中文的宽度与字号相等,英文则是字号的一半。
但是,当中文与英文比例字体混排时,其总宽度就变得不可控了,两者只能在字体的高度上保持相等,在宽度上则是无法预知的(当然,CSS内部会计算总宽度来决定要不要换行)。
补充说一下:英文(以及所有字母文字)自诞生起就是比例字体,这样的话写出来或者印刷出来才美观(否则的话M两边几乎没空隙,i两边却很空)。但是,自从打字机出现(以及后来的电脑),比例字体的局限性就显出来了(主要是会增加机器自动排版的难度),这才诞生了等宽字体。当然随着电脑技术的发展,比例字体的自动排版早已不在话下,但要通过人工来计算其宽度仍然是不现实的事,所以两种字体才能共存至今。
因此,当中文与英文等宽字体混排时,其总宽度是可以根据字号和字数很方便地计算出来的,即中文的宽度与字号相等,英文则是字号的一半。
但是,当中文与英文比例字体混排时,其总宽度就变得不可控了,两者只能在字体的高度上保持相等,在宽度上则是无法预知的(当然,CSS内部会计算总宽度来决定要不要换行)。
补充说一下:英文(以及所有字母文字)自诞生起就是比例字体,这样的话写出来或者印刷出来才美观(否则的话M两边几乎没空隙,i两边却很空)。但是,自从打字机出现(以及后来的电脑),比例字体的局限性就显出来了(主要是会增加机器自动排版的难度),这才诞生了等宽字体。当然随着电脑技术的发展,比例字体的自动排版早已不在话下,但要通过人工来计算其宽度仍然是不现实的事,所以两种字体才能共存至今。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询