CSS之字体样式

目录

长度单位

像素 px

百分比 %  

em

rem

vw/vh

颜色单位

单词

RGB

RGBA

十六进制

HSL值  HSLA值

字体样式

小贴士

字体分类

sans-serif（非衬线字体）

monospace（等宽字体）

cursive（草书字体）

fantasy（虚幻字体）

---

长度单位

像素 px

       像素实际上是屏幕上的一个个小点。100px，100个小点，这个点，正常情况我们是看不到的，如果我们把一个内容放大很多倍，就可以看到了。在pc端（电脑端），一般情况下1px=1个发光点。 像素也是我们最常用的长度单位，它是固定单位。

百分比 %  

       百分比是相对单位，它是相对于其父元素内容区（width/height）宽和高。子元素的大小会随着父元素的大小变化而变化，我们管这种大小布局，叫流式布局。

em

         em是相对单位，它是相对于其父元素内字体大小而设置的，也就是1em=父元素1个font-fize。如果父元素没有字体大小，它就会继承祖先元素的字体大小，如果祖先元素没有设置，它就会继承根标签（html）的默认的字体大小，也就是16px。

rem

         rem也是相对单位，它是只相对于根标签（html）的字体大小而设置，也是1rem=1个html的font-size。html的默认字体大小是16px，有些浏览器有最小的字体大小，一般是10-12px。

vw/vh

         全称：viewport width  视图的宽度，viewport heigth  视图的高度。我们一般把视图划分为100个，最宽100vw，最高100vh。

颜色单位

单词

        在CSS可以直接使用颜色的单词来表示不同的颜色，例如：red,green,yellow等，一些简单的颜色，可以用英文单词，但它不是很方便，一则单词太多；二则颜色也不好描述；三则：太low。

RGB

        在CSS可以使用RGB值来表示不同的颜色。例如：rgb（red，green，blue）， 浓度从0-255， 这个比值不需要记住，一般是设计师设计好，或者我们可以直接吸取颜色。

RGBA

        在CSS也可以使用RGBA值来表示不同的颜色。rgba(red, green, blue, alpha)，alpha是透明度在0-1之间，注：0是透明，1是不透明。

十六进制

        在CSS可以使用十六进制的RGB值来表示颜色，原理和上边RGB原理一样，只不过表示的方式不一样。十六进制数的基数是16，采用的数码是0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。其中A-F分别表示十进制数字10-15。

语法：#红色的浓度绿色浓度蓝色的浓度
例如：#7f2eaa
其中：00表示最小相当于浓度0，ff表示最大相当于浓度255

         红色、绿色、蓝色都用两位十六进制表示，如果两位十六进制是一样的，可以省略一位。例如：#ff0000，可以简写为#f00。(注意：#f0f0f0  不可简写)

常用的16进制颜色：#f00,#0f0,#00f,#ccc灰色，#f60 橘色，#000 ,#fff...

HSL值  HSLA值

          HSL值、HSLA值（色度，饱和度，亮度，透明度）。只要了解即可。

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。
[取值为：0 - 360]
S：Saturation(饱和度)。取值为：0.0% - 100.0%。
L：Lightness(亮度)。取值为：0.0% - 100.0% 。
A：Alpha(透明度)。取值0~1之间。

字体样式

color  设置字体颜色,也可以设置其他颜色,例如边框的颜色等

p {color: red;}

font-size  设置字体的大小,注意不同的单位px，em，rem...

p {font-size: 20px;}

font-family  可以指定文字的字体(一般是系统自带的字体)

p {font-family: 'Courier New', Courier, monospace;}

@font-face  自定义字体

@font-face {
        font-family: 'xiyangyang';/* 你给字体起的名字 */
        src: url(./字体/ZCOOLKuaiLe-Regular.ttf);/* 字体的引入路径 */
      }
p  {font-family: 'xiyangyang';}

font-style  设置文字斜体

p{
font-style:normal;  文字正常显示
		   italic   文字斜体  比较常用(第一种方法)
		   oblique  文字斜体(第二种方法)
}

font-weight  设置文字的加粗

p{
  font-weight:normal;            文字正常显示  默认值
			  bold/bolder       文字加粗(第一种方法)
			  100-900之间的数值  100是最细，900最粗(第二种方法) 
}

font-variant  设置字母小型大写

font-variant:normal;  文字正常显示  默认值
			 small-caps  字母小型大写

小贴士

p{font: italic bold 40px sans-serif;}

   font 可以同时设置以上所有字体的相关样式，但是颜色不可以 。

注意：1、必须有字体大小和字体。2、字体必须在倒数第一位，字体大小必须在倒数第二位。

字体分类

       在网页中一般将字体分成5大类，将字体设置为这些大的分类以后，浏览器会自动选择指定的字体并应用样式。(注意：一般会将字体设置的大分类，指定为font-family中的最后一个字体 ,用来兜底。)

serif（衬线字体）

<p style="font-size: 20px; font-family: serif">衬线字体：我是一段文字，ABCDEFGabcdefg</p>

sans-serif（非衬线字体）

<p style="font-size: 20px; font-family: sans-serif">非衬线字体：我是一段文字，ABCDEFGabcdefg</p>

monospace（等宽字体）

<p style="font-size: 20px; font-family: monospace">等宽字体：我是一段文字，IHABCDEFGabcdefg</p>

cursive（草书字体）

<p style="font-size: 20px; font-family: cursive">草书字体：我是一段文字，ABCDEFGabcdefg</p>

fantasy（虚幻字体）

<p style="font-size: 20px; font-family: fantasy">虚幻字体：我是一段文字，ABCDEFGabcdefg</p>