首页 前端知识 CSS文本样式(一)

CSS文本样式(一)

2024-09-01 00:09:56 前端知识 前端哥 318 743 我要收藏

一、font-family

1、font-family属性

font-family:属性指定元素的字体,语法格式如下:

font-family​:  字体1,字体2,...;

有两种字体系列名称:

  • 字体系列​:特定的字体系列(如Times New Roman或Arial)
  • 通用族​:一组具有相似外观的字体族(如Serif或Monospace)

以下是不同字体样式的示例:

逗号分隔每个值,以表明它们是​可选项​。

如果一个字体的名字​不只一个单词,那么必须用引号"Times New Roman"

font-family属性应该包含几个字体名称作为​备选。 在CSS样式中指定Web字体时,请添加多个字体名称,以避免意外的行为。 如果客户端计算机出于某种原因没有您选择的字体时,则会尝试下一个字体。

指定​通用字体​系列是一个很好的做法,如果没有其他字体可用,让浏览器在通用系列中选择相似的字体。

body {
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

如果浏览器不支持Arial字体,则会尝试下一个字体(Helvetica Neue,Helvetica)。 如果浏览器没有任何一个,它会尝试通用的sans-serif。

如果字体名称包含​空格​,它必须加上​引号。在HTML中使用​"style"​属性时,必须使用​单引号

二、font-size

1、font-size属性

font-size属性用于​设置字体的大小​。 设置网页字体大小的其中之一方法是​使用关键字​。 例如​xx-small​, ​small, medium​,​ large​,​ larger​, ​etc​等。

您还可以使用像素(px)相对尺寸单位(em)或​ pt数值来操纵字体大小。

当您需要​像素精度时,以​素值(px)​设置字体大小是一个不错的选择,它可以让您完全控制文本大小。

PX特点:

1. IE无法调整那些使用px作为单位的字体大小;

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

em(font size of the element)是指相对于父元素的字体大小的单位。em是​相对长度单位​。相对于当前对象内文本的字体尺寸。 如果您没有在页面上的任何位置设置字体大小,那么这是浏览器的默认大小,即16px。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。

要计算em大小,只需使用以下公式:em = px / 16​,即 ​1em = 16px​。

EM特点:

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

例如:

h1 {
   font-size: 20px;
}

h1 {
   font-size: 1.25em; 
}

这两个例子都会在浏览器中产生相同的结果,因为20/16 = 1.25em

 在各种浏览器中尝试​文本大小和​页面缩放的​不同组合​,以确保文本的​可读性

温馨提示:
所有​ 未经调整的​ 浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明 Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

三、font-style

1、font-style属性

font-style属性用于定义字体风格,加设置斜体、倾斜或正常字体,其可用属性如下:

font-style : normal | italic | oblique

font-style: normal  : 正常​的字体
font-style: italic  : ​斜体。对于没有​斜体变量​的特殊字体,将应用oblique,通常用于指定斜体文本
font-style: oblique  : 倾斜的字体

注释:  

  1.  font-style的属性还有:inherit; 只是任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit",所以现在很少用。
  2.  使用​<i>​标签,同样可以达到​倾斜​的效果

四、font-weight

1、font-weight属性

font-weight​控制文本的​粗细​。 值可以设置为​normal (默认)​,boldbolder,和lighter

根据​文本的厚度​,也可以使用从100(细)到​900(粗)的数字来定义字体粗细。400​normal​相同,700​bold​相同。

各个属性值如下所示:

 HTML​ <strong>​标签也使文本​变粗​。

五、font-variant

1、font-variant属性

font-variant属性允许您将字体转换为所有小型大写字母。 这也是针对​英文​而言,因为中文不存在大小写之分。这意味着所有的​小写字母​均会被转换为大写​,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小​。

font-variant属性的值可以设置为normalsmall-caps,和​ inherit​。

六、color

1、color属性

color属性用于指定​文本的颜色

指定文本颜色的其中一种方法是使用​颜色名称​:如red, green, blue等

以下是更改字体颜色的示例。

HTML代码:

<p class="example">大家好!</p>
楼上的怎么这么绿?

CSS代码:

p.example {
   color: green;
}

执行结果:

定义color的其他方法是使用十六进制值RGB

十六进制形式是一个井号​(#)​,最多6个十六进制值​(0-F)​。​"#"​ 后跟6 位​或者 ​3 位​十六进制字符(0-9, A-F)。

RGB红-绿-蓝​(red-green-blue (RGB)),RGB定义了红色​,​绿色​和​蓝色​的各个值。规定颜色值为 rgb 代码的颜色,格式为 rgb(R,G,B),取值可以是​ 0-255 ​的整数​或​百分比

在下面的示例中,我们使用十六进制值将标题颜色设置为蓝色,使用RGB形式将段落设置为红色。

HTML代码:

<h1>woaixuexi</h1>
<p class="example">woaixuexi</p>

CSS代码:

h1 {
   color: #0000FF;
}
p.example {
   color: rgb(255,0,0);
}

执行结果:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/17307.html
标签
评论
发布的文章

JWT(JSON WEB TOKEN)详解

2024-09-10 23:09:36

NPM 常用命令(十二)

2024-09-10 23:09:24

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!