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

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

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

字体类型 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-style font-variant font-weight font-size/line-height font-family  。其中的某个值是可以为空的,如果为空,则选择默认的值。这种写法适合设定一些统一设定值。

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

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

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

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

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

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

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

html5控制字体样式,HTML5之CSS-网页文本美化-字体样式相关推荐

  1. html中如何设置所有文本字体,如何设置HTML页面中文本的字体

    字体属性介绍 CSS中的字体属性是干什么的呢?字体字体确定和字体有关咯,就是设置HTML页面中文本的字体, CSS中经常使用的字体属性有几种呢,笔者给你们梳理了下,比较经常使用的一共有5种,今天咱们就 ...

  2. html页面设置平滑字体,HTML5之CSS-网页文本美化-字体样式

    做了挺长时间的程序员,逐渐的让我意识到,其实技术是给自己打开了一扇窗户,让自己更好的去了解这个世界. 今天,来了解文字在网页在中,是如何去设置的. 中间来一个小插曲,我想大家应该都用过办公软件,那么办 ...

  3. 产生粗体字的html标签,html字体加粗用css设置文字粗体样式

    html如何加粗文字,HTML加粗标签元素有哪些?CSS字体加粗又怎么来实现?粗体代码是什么? 综合以上问题,可以使用CSS样式和HTML标签两种方法来实现,在实际布局时候根据需要来选择文字字体加粗方 ...

  4. html语言 加粗,html字体加粗用css设置文字粗体样式

    HTML加粗标签元素有哪些?CSS字体加粗又怎么来实现?粗体代码是什么? 综合以上问题,可以使用CSS样式和HTML标签两种方法来实现,在实际布局时候根据需要来选择文字字体加粗方法途径. 一.html ...

  5. css文本字体形状_使用CSS更改文本字体

    css文本字体形状 In the last module, we discussed text formatting. By now, you already know how to work wit ...

  6. html实现游戏鼠标样式,巧妙运用CSS立刻改变鼠标的样式

    巧妙运用CSS立刻改变鼠标的样式 互联网   发布时间:2008-10-17 19:27:05   作者:佚名   我要评论 用惯了Windows的人对各种各样的鼠标样式一定不会陌生.当鼠标移动到不同 ...

  7. html链接不同状态样式,如何用css为超链接设置不同样式

    如何用css为超链接设置不同样式 css设置超链接的样式可以使用伪类来实现,使用link来设置正常链接的样式,visited设置访问过的链接样式,hover设置鼠标悬浮时的样式,active设置鼠标点 ...

  8. html5怎么引入苹方简,css 引入苹方字体

    苹方提供了六个字重,font-family 定义如下: 苹方-简 常规体 font-family: PingFangSC-Regular, sans-serif; 苹方-简 极细体 font-fami ...

  9. html修改字体华文彩云,CSS里怎么修改字体样式?需要修改字体和居中显示

    运行迅捷CAD编辑器专 业版软件: 我们点 击菜单栏里的"文字"快捷键图标,在打开的CAD绘图窗口里,创建一个单行文字. 步骤二:格式(O)-文字样式管理(X) 我们找到菜单栏里的 ...

最新文章

  1. JDBC操作数据库实例
  2. tomcat8启动慢
  3. 基于内容推荐系统中的常识
  4. 关闭mina服务_如何彻底关闭MINA客户端
  5. python字符串用法_笔记:python字符串的使用
  6. python如何和qt交互_Python 之Pyqt5操作交互处理,原来这么简单!
  7. ios-实现ARC与MRC混编
  8. C++队列、堆栈、堆的区别
  9. erlang四大behaviour之四-supervisor(转载)
  10. python-绘制双轴柱状图
  11. 数组和集合有什么区别
  12. 中国最美的十大宗教名山(图)
  13. 计算机如何远程控制对方手机,如何远程控制别人的电脑【图解】
  14. STM32F1系列以及CM3内核的时钟与中断内容详解
  15. 安装html5 win7,win7官方正版64位系统安装教程
  16. 现在投资最校园跑腿可行吗?
  17. linux如何修改当前时间
  18. 头歌作业C语言数学运算练习题
  19. 这是Bilibili排名第一的R语言教程
  20. mysql 删除大量数据库_大量删除数据库记录

热门文章

  1. 深度优先搜索和广度优先搜索C语言 (紫皮书)
  2. LibFuzzer学习
  3. 树莓派-从入手到使用(二):树莓派 换源
  4. Keras中dense层原理及用法解释
  5. 通俗讲:自然语言处理(NLP)入门之N-gram语言模型。(朴素贝叶斯分类器的推导)
  6. 全新旅行方式——VR云游,沉浸式体验无负担旅行
  7. SpringSecurity - 整合JWT使用 Token 认证授权
  8. 自回归(AR)语言模型和自编码(autoencoding)模型--术语解读
  9. 魔坊APP项目-27-直播、客户端中调整窗口大小、能播放rtmp格式直播流的播放器模块
  10. aloha算法c语言代码,论文对最简单的反碰撞算法ALOHA算法进行了研究,在识别时间...