网站设计公司易捷网络:专注企业网站设计
您现在的位置:首页 > 网站设计资讯 > 网站建设时网页字体大小限制的解决

网站建设时网页字体大小限制的解决

来源:易捷网站设计公司     时间:2019-04-04

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浏览器下字体偏上的问题。

深圳彬野文化传播网站首页设计效果图-易捷网站设计
深圳彬野文化传播网站首页设计效果图
返回上一级
您可能需要:
网站设计图标
企业网站设计
高速稳定的国内空间,免费备案的香港、国外空间,单线、双线以多线空间
点击咨询
关键字推广优化图标
网站推广优化
指定网站关键词,确保一月之内优化到搜索引擎得首页,到首页之后再收费
点击咨询
企业邮箱图标
企业邮箱申请购买
以企业官网后缀为名称的邮箱,彰显公司企业形象,先试用,满意后再付款
点击咨询
国徽图标
网站域名空间备案
域名空间提交国家工信部备案审核,十五天即可完成,网站备案实名势在必行
点击咨询
网站设计最新案例赏析
网站设计相关资讯推荐
(www.ejaket.net)版权所有
QQ在线咨询