2016 - 2024

感恩一路有你

优秀网站网页设计 网页设计中最常用的字体有哪些?(中文和英文)?

浏览量:1409 时间:2021-03-30 07:51:19 作者:admin

网页设计中最常用的字体有哪些?(中文和英文)?

常用字体是浏览器或操作系统的默认字体。不同的系统和浏览器将有不同的默认字体。当然,我们可以自己在网站上设置。但是,我们必须考虑您选择的字体以及它是否安装在您用户的计算机中。否则,浏览器将更改为默认字体。

常用默认字体有:win最常用字体、小字体点阵、大字体TrueType,但大字体不好看,所以最好不要做标题。

启用ClearType时,Vista之后引入的新字体具有良好的显示效果。如果ClearType没有打开,它将是空的。

Mac上的默认中文。

它被评为设计师最喜欢的字体、写实风格、简洁现代的线条,非常受欢迎。它被认为是Mac下最好的网页字体,但在Windows下由于暗示而显示不好。

Helvetica的“克隆”与Helvetica非常相似。例如,在细节上,R和G略有不同。如果字号太小,字数太多,就会显得很累。Win和MAC显示都是正常的

作为系统字体,以上可以应用在网站标题和正文需要呈现大量信息的地方。

PC端和移动端网页设计的字体规范是什么?

网页设计里的字体怎么改变rem格式?

电脑网页的默认字体是宋体。我们在重新设计时需要注意歌曲的字体。必须选择最小12像素的汉字,字符属性为“无”。因为宋体中文只有12个像素,所以只能看得很清楚。当它大于12或14时,我们通常用黑体字。最小的英文宋体可以是9像素,很少使用。对于移动终端上的IOS,我们将字体设计为apple,对于Android,我们使用粗体字体。

��应式网页设计:rem、em设置网页字体大小自适应

「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢?

IE9 ,Firefox、Chrome、Safari、Opera 的主流版本都支持了,我可以放肆的使用 rem 了。

em 的计算是基于父级元素的,在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人,再也不用担心父级元素的 font-size 了,因为它始终是基于根元素(html) 的。

比如默认的 html font-size=16px,那么我想设置12px 的文字就是:12÷16=0.75(rem)

当然,你可以引入 CSS 预处理工具(Sass、LESS 、Stylus等)自动计算 rem 值,这里就不一一举例了。

但是像我这样的懒人或者团队开发中还没有引入 CSS 预处理工具的该肿么办呢?只能搬个计算器啪啪啪了吗?别急,你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛!Like this:

html{font-size:62.5% /* 10÷16=62.5% */} body{font-size:12pxfont-size:1.2rem /* 12÷10=1.2 */} p{font-size:14pxfont-size:1.4rem}

需要注意的是,为了兼容不支持 rem 的浏览器,我们需要在 rem 前面写上对应的 px 值,这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的 font-size:100%,还是设置为 font-size:62.5%,如果你引入了 CSS 预处理工具那么自然可以使用默认值,如果由于其他原因使用 font-size:62.5% 也无可厚非,完全可以在 body 中重置回你需要的默认 font-size。

响应式网页设计:REM和EM自适应设置网页的字体大小

“REM”是指根元素(HTML)的字体大小。令人高兴的是,他们已经预约从IE6到chrome。根元素的默认字体大小是16px。这样一个新装置的兼容性如何?

IE9,Firefox、chrome、Safari和opera的主流版本都支持它。我可以自由使用REM。

EM的计算是基于父元素的,这给实际应用带来了很大的不便。所以REM的出现拯救了像我这样不会算术的人。他们不必再担心父元素的字体大小,因为它总是基于根元素(HTML)。

例如,默认的HTML字体大小=16px,那么我想将12px的文本设置为:12△16=0.75(REM)

当然,您可以引入CSS预处理工具(SASS、less、stylus等)来自动计算REM值,所以这里我不一一给您举例。

但是如果像我这样的懒人或团队没有引入CSS预处理工具呢?我能移动一个计算器吗?别担心。你可以做些改变。让我们改变默认字体大小=10px的HTML计算!像这样:

html{字体-尺寸:62.5%/*10÷16=62.5%*/}正文{字体-大小:12px字体大小:1.2rem/*12÷10=1.2*/}p{字体-大小:14px字体大小需要注意的是,为了与不支持rem的浏览器兼容,我们需要在rem前面写上相应的PX值,因此,不支持REM的浏览器可以正常降级。其实,不用太担心。这是默认字体-尺寸:100%,或设置为字体-尺寸:62.5%如果引入CSS预处理工具,自然可以使用默认值。如果您出于其他原因使用字体-尺寸:62.5%可以重置正文中的默认字体大小。

优秀网站网页设计 网页设计教程 网页设计

版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。