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-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-网页文本美化-字体样式相关推荐
- html中如何设置所有文本字体,如何设置HTML页面中文本的字体
字体属性介绍 CSS中的字体属性是干什么的呢?字体字体确定和字体有关咯,就是设置HTML页面中文本的字体, CSS中经常使用的字体属性有几种呢,笔者给你们梳理了下,比较经常使用的一共有5种,今天咱们就 ...
- html页面设置平滑字体,HTML5之CSS-网页文本美化-字体样式
做了挺长时间的程序员,逐渐的让我意识到,其实技术是给自己打开了一扇窗户,让自己更好的去了解这个世界. 今天,来了解文字在网页在中,是如何去设置的. 中间来一个小插曲,我想大家应该都用过办公软件,那么办 ...
- 产生粗体字的html标签,html字体加粗用css设置文字粗体样式
html如何加粗文字,HTML加粗标签元素有哪些?CSS字体加粗又怎么来实现?粗体代码是什么? 综合以上问题,可以使用CSS样式和HTML标签两种方法来实现,在实际布局时候根据需要来选择文字字体加粗方 ...
- html语言 加粗,html字体加粗用css设置文字粗体样式
HTML加粗标签元素有哪些?CSS字体加粗又怎么来实现?粗体代码是什么? 综合以上问题,可以使用CSS样式和HTML标签两种方法来实现,在实际布局时候根据需要来选择文字字体加粗方法途径. 一.html ...
- css文本字体形状_使用CSS更改文本字体
css文本字体形状 In the last module, we discussed text formatting. By now, you already know how to work wit ...
- html实现游戏鼠标样式,巧妙运用CSS立刻改变鼠标的样式
巧妙运用CSS立刻改变鼠标的样式 互联网 发布时间:2008-10-17 19:27:05 作者:佚名 我要评论 用惯了Windows的人对各种各样的鼠标样式一定不会陌生.当鼠标移动到不同 ...
- html链接不同状态样式,如何用css为超链接设置不同样式
如何用css为超链接设置不同样式 css设置超链接的样式可以使用伪类来实现,使用link来设置正常链接的样式,visited设置访问过的链接样式,hover设置鼠标悬浮时的样式,active设置鼠标点 ...
- html5怎么引入苹方简,css 引入苹方字体
苹方提供了六个字重,font-family 定义如下: 苹方-简 常规体 font-family: PingFangSC-Regular, sans-serif; 苹方-简 极细体 font-fami ...
- html修改字体华文彩云,CSS里怎么修改字体样式?需要修改字体和居中显示
运行迅捷CAD编辑器专 业版软件: 我们点 击菜单栏里的"文字"快捷键图标,在打开的CAD绘图窗口里,创建一个单行文字. 步骤二:格式(O)-文字样式管理(X) 我们找到菜单栏里的 ...
最新文章
- JDBC操作数据库实例
- tomcat8启动慢
- 基于内容推荐系统中的常识
- 关闭mina服务_如何彻底关闭MINA客户端
- python字符串用法_笔记:python字符串的使用
- python如何和qt交互_Python 之Pyqt5操作交互处理,原来这么简单!
- ios-实现ARC与MRC混编
- C++队列、堆栈、堆的区别
- erlang四大behaviour之四-supervisor(转载)
- python-绘制双轴柱状图
- 数组和集合有什么区别
- 中国最美的十大宗教名山(图)
- 计算机如何远程控制对方手机,如何远程控制别人的电脑【图解】
- STM32F1系列以及CM3内核的时钟与中断内容详解
- 安装html5 win7,win7官方正版64位系统安装教程
- 现在投资最校园跑腿可行吗?
- linux如何修改当前时间
- 头歌作业C语言数学运算练习题
- 这是Bilibili排名第一的R语言教程
- mysql 删除大量数据库_大量删除数据库记录
热门文章
- 深度优先搜索和广度优先搜索C语言 (紫皮书)
- LibFuzzer学习
- 树莓派-从入手到使用(二):树莓派 换源
- Keras中dense层原理及用法解释
- 通俗讲:自然语言处理(NLP)入门之N-gram语言模型。(朴素贝叶斯分类器的推导)
- 全新旅行方式——VR云游,沉浸式体验无负担旅行
- SpringSecurity - 整合JWT使用 Token 认证授权
- 自回归(AR)语言模型和自编码(autoencoding)模型--术语解读
- 魔坊APP项目-27-直播、客户端中调整窗口大小、能播放rtmp格式直播流的播放器模块
- aloha算法c语言代码,论文对最简单的反碰撞算法ALOHA算法进行了研究,在识别时间...