网站建设_北京网站建设_北京网站制作_北京网页设计_北京网站建设公司_[亿美网络]

北京网站建设时网页字体大小解决方案

2019-04-08 08:50


css中字体大小在不同浏览器兼容性问题;
 
 
 
css中使用font-size设定字体大小,不同浏览器的字体height一样,但是width不同,比如在火狐和谷歌中,font-size:20px,字体的高度变为20px,但是谷歌的字体宽度比火狐长
 
 
解决方法如下:
 
 
1、 将浏览器的基准字号设置为 62.5%,也就是 10px,现在 1rem = 10px —— 为了计算方便。然后 在 body上应用 font-size: 2rem;,那么现在body的字体大小就是 20px。
 
 
html { font-size: 62.5%; }
 
body { font-size: 2rem; /* =20px */ }
 
 
 
2、webkit浏览器渲染出来的字体具有一定的平滑效果,所以我们会看到 chrome 渲染出来的字体要大一点并且宽一点,可添加如下内容:
 
 
body {
 
 -webkit-font-smoothing: antialiased;
 
 -moz-osx-font-smoothing: grayscale;
 
}
 
启用浏览器的默认平滑字体效果css:
 
body {
 
 -webkit-font-smoothing: subpixel-antialiased;
 
 -moz-osx-font-smoothing: auto;
 
}
 
设置Chrome下,设置小于12px字体,显示仍为12px
 
-webkit-text-size-adjust:none;
 
chrome浏览器最小字体大小限制的解决方案;
chrome有最小字体大小12px的限制,以前可以用-webkit-text-size-adjust:none来解决。但是chrome27以后就不支持了,而且很影响用户体验。我们可以巧用transform来显示小于12px的字体。代码如下:
 
    .font-6px{
 
      transform: scale(0.5);
 
      font-size: 12px;
 
    }
 
要显示6px的字体,就把字体大小为12px,然后用transform缩小到原来的50%。字体实际显示大小就是6px了。
 
Android浏览器下字体偏上的问题的解决;
 
在Android浏览器下,使用以下几种方式进行字体垂直居中的时候都会导致字体偏上:
 
使用line-height 来使字体垂直居中
 
使用padding 来使字体垂直居中
 
 
本文主要说的是使用<html>标签的lang属性设置为zh-CN 来处理以上问题。
 
<html>标签的lang
 
 
<html>标签的lang 属性可用于网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的。根据 W3C 推荐标准,您应该通过 <html>标签的lang 属性对每张页面中的主要语言进行声明。
 
 
 
如果未声明lang 属性,默认为en ,网页将会使用en 来进行文字渲染,但如果生命为zh-CN ,则会采用中文字体来进行渲染,就可以适当解决在Android浏览器下字体偏上的问题。
 
 

【亿美网络】-北京网站建设公司服务支持

我们珍惜您每一次在线网站建设询盘,有问必答,用专业的态度,提供贴心专业的网站建设服务。

让您真正感受到我们技术与服务的与众不同!

合作流程

网站制作流程从提出需求到网站制作报价,再到网页制作,每一步都是规范和专业的。

常见问题

提供什么是网站定制?你们的报价如何?等网站建设常见问题。

售后保障

网站制作不难,难的是一如既往的热情服务及技术支持。我们知道:做网站就是做服务,就是做售后。