CSS字体样式设置、CSS文本样式设置

HTML 、CSS 专栏收录该内容
29 篇文章 0 订阅

一、CSS字体样式设置

1.字体样式设置

字体样式大致有如下几种特征:
字体类型(风格)、字体粗细、字体大小、字体系列
(1)字体类型(风格) font-style
用于设置字体风格,可设置以下值:
① normal:普通字体
② italic:斜体
③ oblique:倾斜字体

(2)字体粗细 font-weight
用于设置字体粗细,可设置以下值:
① normal:正常粗细
② bold:粗体
③ bolder:更粗的字体
④ lighter:更细的字体
⑤ 100~900:步长为100,
400 等同于 normal,而 700 等同于 bold

(3)字体大小 font-size
用于设置字体大小的,可设置任意正整数和浮点数
默认情况下,几乎所有的浏览器的默认字体大小都为16px. 且Chrome等主流浏览器不支持12像素以下的字体。

(4)字体系列 font-family
用于设置字体系列,就是我们通常说的“所用字体”。
设置字体有以下规则:
1.使用中文字体,或带空格的英文字体名,需要用“引号”将该字体名扩起来

2.单个单词的字体名称则无需加上引号。

3.“font-family”可以有多个值,多个值设置的作用是,当浏览用户本地计算机没有找到设置的第一个值所表示的字体时,会去找第二个,以此类推,若找到最后一个值都没有找到匹配的字体,浏览器则会用自己的默认字体。

4.考虑到网页最终显示效果在不同设备上的一致性,我们通常使用的中文字体只有:“宋体”、“微软雅黑”、“黑体”、“楷体”、“幼圆”等,而目前以“微软雅黑”为最常用设计字体。

5.常用的英文字体有:“Arial”、“Helvetica”、“Tahoma”、“Verdana”、“Lucida Grande”、“Times New Roman”、“Georgia”等。

2.组合值写法
(1)给上所有的属性
我们能将“font”的多个值组合起来写,比如我们要设置一个
风格为正常,粗体,20像素大小,“微软雅黑”

风格为斜体,正常粗细,字号为22像素,“宋体”
我们可以这样写:

Css代码
在这里插入图片描述
(2)省略字体类型或字体风格之一,或都省略
1.所以在写“font”属性组合值的时候可以省略二者之一,以辨识到的值进行设置,另外一个自动为“normal”,
2.甚至还能省略掉第前两个值,只保留“font-size”和“font-family”
即:style,weight可只给上任意一个,或者都给,或者都不给,顺序也可以换,但是要在前两个。
如:

CSS代码
在这里插入图片描述

注意:
在“font”组合值的写法中,只有“font-size”和“font-family”这两个的值是不能省略的,而且是缺一不可,顺序也是要先大小后系列不能变,否则浏览器会不认识该值,对该组合值进行报错。
(3)在font内设置文本行高
“font”属性组合值的写法,除了以上所提到的,它还有一种比较不常见,却还比较实用的写法,即可直接在“font”属性内设置文本的行高“line-height”,如下:

3.扩展:字体单位px ,em , rem【必须掌握】
① px(像素,相对于显示器屏幕分辨率而言)
② em(相对当前元素内文本的字体尺寸,会继承父元素大小)
③ rem (相对HTML根元素,最常用的单位)
PX
1.像素px是相对于显示器屏幕分辨率而言的。
2.PX特点
1. IE无法调整那些使用px作为单位的字体大小;
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;
3. Firefox能够调整px和em,rem。大部分中国网民使用IE浏览器(或内核)。
3.当把一个图放大后,看到很多矩形的小方块,那些就是像素。

EM
4.em是相对长度单位。相对于当前标签内font-size的大小而言。
5.如果当前标签字体尺寸未被人为设置,当前标签内font-size的大小会继承父标签的字体大小。
【如果父标签也没设置大小,那么就会找到继承的顶点–>浏览器的默认16px字体大小。所以,默认情况16px==1em 】

6.如果设置了就会以设置font-size大小为准。

7.在主流浏览器中,字体的大小不能小于12px (宽高可以小于12px),如果字体大小小于12px,那么会强制变为12px.

<div style="font-size: 10px;">你好啊</div>
<div style="font-size: 12px;">你好啊</div>
<div style="font-size: 14px;">你好啊</div>
<div>你好啊</div>

8.EM特点
em的值并不是固定的;
em会继承父级元素的字体大小。
REM
rem是CSS3新增的一个相对单位(root em,根em),这个单位引起了广泛关注。
9.rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。

这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。
10.rem单位兼容问题
目前,除了IE8及更早版本外,所有浏览器均已支持rem。
对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子:
p {font-size:14px; font-size:.875rem;}
注意:
选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。
11.px 与 rem 的选择?
① 对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可
② 对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

4.扩展:css3大小单位vw、vh、vmin、vmax【必须了解】
① 基本概念
先明白一个名词:视窗

视窗(Viewport)是你的浏览器实际显示内容的区域,即不包括工具栏和任务栏的网页可视区域大小。
然后,vw、vh、vmin、vmax 是一种视窗单位,也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗(Viewport)大小来决定的,值为数字n,表示占据视窗大小的n%。
② 具体描述
vw:视窗宽度的百分比(1vw 表示视窗宽度的 1%)
vh:视窗高度的百分比 (1vh 表示视窗高度的 1%)
vmin:当前 vw 和 vh 中较小的一个值
vmax:当前 vw 和 vh 中较大的一个值
③ 代码示例


Document

/* 每个div的大小都为视高的20% /
div {
border: 1px solid red;
height: 20vh;
}
/
div为视宽的40%,字体大小为视宽的1% /
.demo {
width: 40vw;
font-size: 1vw;
background-color: #50688B;
color: #FFF;
}
/
div为视宽的50%,字体大小为视宽的2% /
.demo1 {
width: 50vw;
font-size: 2vw;
background-color: rgb(53, 108, 190);
color: rgb(170, 111, 111);
}
/
div为视宽的60%,字体大小为视宽的3% /
.demo2 {
width: 60vw;
font-size: 3vw;
background-color: #644bd3;
color: rgb(54, 41, 41);
}
/
div为视宽的70%,字体大小为视宽的4% */
.demo3 {
width: 70vw;
font-size: 4vw;
background-color: #ff006e;
color: #FFF;
}

所有div的高度为20vw,即视宽的20%

div为40vw即视宽的40%,字体大小为1vw即视宽的1%
div为50vw即视宽的50%,字体大小为2vw即视宽的2%
div为60vw即视宽的60%,字体大小为3vw即视宽的3%
div为60vw即视宽的70%,字体大小为4vw即视宽的4%
```

④ vw、vh 与 % 百分比的区别
(1)% 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。
(2)vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。
⑤ vmin、vmax 用处
做移动页面开发时,如果使用 vw、wh 设置字体大小(比如 5vw),在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。
⑥ 浏览器兼容性
(1)桌面 PC
Chrome:自 26 版起就完美支持(2013年2月)
Firefox:自 19 版起就完美支持(2013年1月)
Safari:自 6.1 版起就完美支持(2013年10月)
Opera:自 15 版起就完美支持(2013年7月)
IE:自 IE10 起(包括 Edge)到现在还只是部分支持(不支持 vmax,同时 vm 代替 vmin)
(2)移动设备
Android:自 4.4 版起就完美支持(2013年12月)
iOS:自 iOS8 版起就完美支持(2014年9月)
5.扩展:复选框无法与旁边文字对齐的解决方式

解决方式:
给input设置vertical-align: -6px;
.read input{
vertical-align: -6px;
}
6.扩展:两个原本对齐的行内div,其中一个加了内容后就无法对齐的解决方式

解决方式:

方式一: 给div设置超出文本的内容就自动隐藏。
方式二: 给div设置vertical-align: top; ( 有时候为top也可以 )

五、CSS文本样式设置
当许多文字组合到一起就形成了文本,现在我们研究的就是如何设置这些文本的样式。
1.文本的颜色 “color”
在目前的浏览器标准中,要想改变浏览器默认字体的颜色(#000000)唯一的途径就是通过CSS的“color”属性进行设置。颜色。
color属性可以设置4种类型的值
① 颜色英文单词
可以通过颜色的英文单词直接设置文本的颜色,如
“red”、“”orange、“yellow”、“green”、“cyan”、“blue”、“purple”、“pink”、“gray”、“black”和“white”
等等。
② HEX(三原色,16进制表示)
通过“#”+16进制表示颜色,
有“#”+“三位”和“#”+“六位”的形式。
若是“三位”的形式,第一位表示“红”,第二位表示“绿”,第三位表示“蓝”,通过取值区间“0-9”,“a-f”(10-16)的组合,如“#26f”,共计能表达4,096个颜色。
若是“六位”的形式,可以表示的颜色数更加细致,第一二为表示“红”,第三四位表示“绿”,第四五位表示“蓝”,同样也是通过取值区间“0-9”,“a-f”的组合,如“#2369fd”,共计能表达16,777,216【一千六百多万】个颜色。
③ RGBa(三原色,十进制表示)
和“HEX”表示三原色一样,该模式同样也是采用三元色的值来表现色彩,不过“RGBa”颜色模式采用的是10进制的值,
格式如“rgb(34, 102, 255)”,值之间用英文逗号“,”进行分割,第一个值表示“红”,第二个值表示“绿”,第三个值表示“蓝”,每个值的区间为“0-255”(256个色阶),同样能表示16,777,216【一千六百多万】个颜色。
除此之外,该模式还支持对不透明度的设置,也就是“RGBa”里面的这个“a”(alpha),它表示不透明度,取值区间是“0到1”之间的浮点数(可保留到两位小数),
“0”表示完全透明,“1”表示完全不透明,写法如“rgba(34, 102, 255, 0.55)”、“rgba(34, 102, 255, .9)”或“rgb(34, 102, 255)”。
④ HSLa(色调,饱和度,亮度,不透明度)
该模式通过设置
“色调”(Hue)、
“饱和度”(Saturation)、
“亮度”(Lightness)
“不透明度”(Alpha)
来表现色彩的,不透明度的表示和“RGBa”一样,我们主要来看下面三个值的意义:
1)色调
除开“黑色”和“白色”从纯红色过度到纯蓝色再过度到纯红色这一过程的颜色轴的区间,共计360个色调;
2)饱和度
从该色调的纯黑到该色调的纯色区间,越接近黑色,饱和度越低,越接近纯色,饱和度越高;
3)亮度
从“纯黑”到“纯白”这一过程的表示,越接近黑色亮度越低,越接近白色亮度越高。
4)例子
HSL(76, 35%, 45%) :这是一个色调为76,饱和度35%,亮度45%,不透明的颜色
HSLa(316, 75%, 56%, 0.9):这是一个色调为316,饱和度75%,亮度56%,不透明度0.9的颜色
⑤ Transparent(透明)
只要设置该值,那文本的内容将变为完全透明,即无论背景为什么颜色或图片,都会完全看不到设置的文字元素,只是起到了一个占位作用,除非文本被选中,如下例:
div { color: transparent;}
需要补充的是,“IE 8”浏览器及以下的版本不支持“RGBa”、“HSLa”模式及“Transparent”值,即不支持透明度部分的值,对常规“RGB”和“HSL”模式仍能正常支持。

2.文本的居中方式“text-align”
该属性用于控制“行内块元素”或“块元素”内“行内元素”(文本元素)的居中方式的,包含三个值:
left(默认)
文本左对齐
center
文本居中对齐
right
文本右对齐
3.段落首行缩进“text-indent”
该属性是用于设置 每个段落首行缩进数量值 的属性,
如果是用于中文布局,一般会使用“2em”的数值和单位来为每个段落的首行缩进“两个字符”。
p {
text-indent: 2em;
}

4.文本装饰线“text-decoration”
该属性是为文本上添加一根装饰线,带"href"属性的标签默认会带有一根下划线,就是由该属性的值“underline”设置的。
“text-decoration”属性有以下值:
none(默认)
不显示任何装饰线
underline
在文本下方显示装饰线
overline
在文本上方显示装饰线
line-through
在文本中间显示装饰线,相当于删除线
p {
text-decoration: none;
}

5.英文字母大小写转“text-transform”
该属性能将“行内元素”中的英文文本进行大小写转换,以满足网站对规范性的要求。
特别在一些对项目产品细节要求至严的跨国企业或合资企业,
他们对网站或应用中的文本格式也有相当高的要求。
当网站中的绝大部分英文文本都是由其它地方整理粘贴而来的时候,如果要逐一去修改这些文本,不仅时间成本大大地增加,也容易出现一些难以一时发现的疏漏,这个时候“text-transform”属性就有它的“用武之地”了。
该属性有以下属性值:
none(默认)
保持文本中英文单词的默认大小写
capitalize
将每个英文单词首字母变为大写字母(而不管他原本是大写还是小写),其它字母即便是小写也不管。
uppercase
将所有英文单词转换为大写字母
lowercase
将所有英文单词转换为小写字母
p {
text-transform: capitalize;
}

6.文本的阴影“text-shadow”
该属性的作用是给文本添加阴影效果。
该属性最初是在CSS2.0中被定义的,但在CSS 2.1被删除了,不知道是出于什么考虑,在CSS3.0中又重新被写进了规范。
目前除了IE9及之前版本不支持该属性外,其它主流浏览器钧支持该属性。
p {
text-shadow: 0px 0px 2px black;
}

该属性有4个值,具体如下:
水平方向阴影偏移(h-shadow)
“0”表示维持原位,正数为向右偏移,负数为向左偏移。单位为像素“px”。
垂直方向阴影偏移(v-shadow)
“0”表示维持原位,正数为向上偏移,负数为向下偏移。单位为像素“px”。
阴影模糊距离(blur)
用正数表示阴影模糊的单位距离,距离越大模糊程度越高,单位为像素“px”。
阴影的颜色(color)
支持Web技术中的常用颜色模式:“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。
和“行内块元素”和“块元素”所用的“box-shadow”(以后会学习)有所不同,文本阴影的属性值里没有“inset”(设置为内阴影)和“spread”(阴影的扩展,单位像素“px”),以后在使用中需要加以区分。

7.段落文本行高“line-height”
该属性是用于设置“行内元素”中文本元素在一行中所占据的高度,(可实现单行文本垂直居中的效果)
使用场景如:表格、导航按钮、自定义样式按钮、标题栏等。
值 描述
normal 默认。他会自动设置一个合理的行间距。
number 设置数字,表示字体尺寸的倍数。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。默认为100%
inherit 规定应该从父元素继承 line-height 属性的值。

8.单词的间距“word-spacing”
该属性用于设置英文单词之间的间距。
注意
他区分单词时是按照单词两边是否含有空格来判断的,所有如果你的内容是中文,
1.当你的文字间没有空格时,整体就会被当做一个单词。
2.当你的每个汉字两边都有空格时,每个汉字才会被当做是一个单词。
3.其值可以为负数,距离会减小

p {
word-spacing: 1em;
}

9.字符的间距“letter-spacing”
和“word-spacing”有所不同,该属性是用于控制字符间的间距。
一个字母,一个汉字,甚至一个空格都是一个字符。
注意:
1.在html中,多个空格最终会变为一个空格的。
2.其值可以为负数,距离会减小

10.空格换行处理“white-space”
该属性设置如何处理元素内的空格符和换行符,它主要有以下值:
normal(默认)
由浏览器处理空格和换行
pre
段落里所有的空格符和换行符都会被保留(类似于

标签)
nowrap
段落内的文本不会换行(类似于没有设置过换行的“notepad”)
pre-wrap
段落里所有的空格符序列和换行符序列都会被保留,这点类似于pre
但是他不会去更改浏览器的默认行为(当内容的宽度小于了窗体的宽度时会出现滚动条的行为)
pre-line
保留换行符,但是多个空格还是会按照浏览器的默认行为处理(多个合并为一个)

注意:
如果你当前的内容是无空格分隔的一连串的英文,那么他会被浏览器当作是一个单词,不会让他换行,只会出现水平滚动条去适应他。
11.设置文本方向“direction”
该属性是由于控制文本显示方向的,即从左往右,或从右向左。
在有些国家,如:“阿拉伯”、“伊朗”、“以色列”,还有古典的“中日韩”文等等,他们的文字显示方向都是从右向左的,为了适应这些文字方向的需求,如果用手工去设置,耗费的时间成本会过高,也非常容易出错,这个时候“direction”属性会帮你克服这个问题。该属性有两个值:
ltr
默认值,文本方向从左到右
rtl
文本方向从右向左

  • 7
    点赞
  • 4
    评论
  • 43
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值