900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > html5控制字体样式 HTML5之CSS-网页文本美化-字体样式

html5控制字体样式 HTML5之CSS-网页文本美化-字体样式

时间:2020-03-04 03:19:42

相关推荐

html5控制字体样式 HTML5之CSS-网页文本美化-字体样式

做了挺长时间的程序员,逐渐的让我意识到,其实技术是给自己打开了一扇窗户,让自己更好的去了解这个世界。

今天,来了解文字在网页在中,是如何去设置的。

中间来一个小插曲,我想大家应该都用过办公软件,那么办公软件的文档工具,能操作文本的一些什么属性呢?首先,应该是字体的种类,然后就是设置,字体的大小,粗体,斜体,颜色,装饰(下划线,删除线)字母大小写等等。针对文字的一些属性设置,很显然,在网页的文本中当然也需要去设置这些属性。那么如何去设置呢?

字体类型 font-famliy: cursive serif;它可以设置各种字体。并且可以给一个字体组,排在前面的优先级较高,如果用户没有列表中的字体,则会引用系统默认的字体。(个人感觉,这并不适合网页风格的统一性,应该有种方式,能够让字体统一起来,如果用户系统里不存在该字体,给它安装一个字体即可。很显然这是有代价的,看如何取舍)

字体大小 font-size: 20px [2em] [200%][large] 。简单来说,就是两种取值,一种是相对大小,一种是固定大小(常用的就两种 百分比以及固定像素的用法。)相对值是相对于父元素的字体大小。如果父元素同样设置了相对值 2em,子元素依然取用相对值 2em ,那么子元素的字体将是顶级元素的4倍大小,从而造成字体混乱,因此要避免相对值的嵌套写法。

粗体:font-weight: 400 [normal] || 900 [bold] 900或者bold取值都是最大值,400 或则normal表示正常值,其他值也就是其中的过渡值。

斜体:font-style:italic ||normal||oblique 其中,italic和oblique都有倾斜的效果,后者更倾向于倾斜的字体类型,前者,更倾向于强制倾斜。

颜色:color:blue 。(插曲,由于习惯用 font- xx 这种模式,然后突然前面的font都没有了,都有点不适应。)其实设置颜色,除了基本的颜色的英文名称之外还有一些其他取色标准。rgb调色,十六进制等等。(一般都是使用取色器去调整这些颜色的。所以取值都无关紧要的感觉。)(扩展:css3为了更方便的设置颜色,还提供了更规范的HSL表示方法,以及HSLA RGBA等来控制透明度的写法)

装饰:text-decoration:none||overline||underline||blink||linethrough 。其实就是下划线,上划线,删除线等。(PS:blink这种闪烁效果 好像支持效果不大好,IE 谷歌浏览器都不支持)

字母大小写:font-variant:normal || capitalize || uppercase || lowercase 正常的,首字母大写的,全大写,全小写。(PS 各个浏览器对于首字母大写的实现方式有些许不同,有些认为必须要以空格分开才看做是一个单词,有些认为,只要是一个单词,那么就应该大写,比如Text-Transform )

最后其实发现,除了text-decoration 以及color 都是 font- xx 开头的,还有一些值的设置,比如蓝色,可以用blue表示,可以理解为,这是老外们的一种简单的语义化设置操作。

css还给整个字体家族提供了一种综合的简便写法。能够依次的设置字体属性font-stylefont-variantfont-weightfont-size/line-heightfont-family 。其中的某个值是可以为空的,如果为空,则选择默认的值。这种写法适合设定一些统一设定值。

小结:css的值设定基本可以理解为是英文的语义化设置,只要能够记住这些单词,那么久能够很好的理解css正在做的事情。

属性的取值也部分采取了语义化设置。如颜色 blue 首字母大小写,font-variant

font-style : 字体-样式 (斜体)

font-variant: 字体-词的变体 (理解为对字母大小写的变更)

font-weight:字体-重量 (粗体)

font-size/line-height 字体-大小 /行高 (绝对值:13px ,相对值:200%)

font-family :字体:家族 (通用字体:serif fantasy 等等)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。