网站设计公司易捷网络:专注企业网站设计

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

来源:易捷网站设计公司     时间: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浏览器下字体偏上的问题。

深圳网站设计公司易捷网络科技是一家专业从事深圳网站建设和深圳网页设计的深圳网络公司,主要经营的业务有:深圳网站建设、网页设计、网站推广优化、企业邮箱申请、网站域名空间备案。欢迎来电咨询(微信同号):13714247375
返回上一级
您可能需要:
网站设计图标
企业网站设计
高速稳定的国内空间,免费备案的香港、国外空间,单线、双线以多线空间
点击咨询
关键字推广优化图标
网站推广优化
指定网站关键词,确保一月之内优化到搜索引擎得首页,到首页之后再收费
点击咨询
企业邮箱图标
企业邮箱申请购买
以企业官网后缀为名称的邮箱,彰显公司企业形象,先试用,满意后再付款
点击咨询
国徽图标
网站域名空间备案
域名空间提交国家工信部备案审核,十五天即可完成,网站备案实名势在必行
点击咨询
网站设计相关资讯推荐
投资有风险,网站评估需谨慎
网站被K后怎样重建
深圳企业网页设计需遵循哪些原则
网站页面设计中需注意什么细节
新站如何做才能快速被百度收录
网站建设方案都包含哪些内容
如何才能提高网站流量商机转化率
如何让网站运行又快又稳
网站没有设置关键词排名却很好的原因
动态网页的ASP实现技术
设计企业网站首页的网站地图需要注意哪些问题
英文网站设计注意的细节问题
电子书推广的传播
网站制作时融入SEO优化的效果
个人网页的制作有哪些秘诀
QQ在线咨询