提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

CSS中设置字体样式的5种常用属性—让字体设置再无难点

属性CSS 设置 常用 样式 字体 难点
2023-09-27 14:22:49 时间

设置字体样式的5中常用属性如下

1:color 设置字体颜色,也可以设置其他颜色

2:font-size 设置字体大小

        (1)、设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的

我们设置的font-size实际上是设置格的高度，并不是字体的大小

一般情况下文字都要比这个格要小一些，也有时会比格大，

根据字体的不同，显示效果也不能

        (2)、设置文字的大小,浏览器中一般默认的文字大小都是16px,默认的最小的字体是12px

        (3)、常用的单位 px，rem，em

3:font-family可以指定文字的字体

        当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体，该样式可以同时指定多个字体，多个字体之间使用‘，’分开，当采用多个字体时，浏览器会优先使用前边的字体，如果前边没有在尝试下一个， 浏览器使用的字体默认就是计算机中的字体， 如果计算机中有，则使用，如果没有就不用，在开发中，如果字体太奇怪，用的太少了，尽量不要使用， 有可能用户的电脑没有，就不能达到想要的效果。

        在网页中将字体分成5大类：

serif ['serif]（衬线字体）sans-serif（非衬线字体）monospace （等宽字体）cursive ['kə:siv]（草书字体）fantasy ['fæntəsi]（虚幻字体）

可以将字体设置为这些大的分类,当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式,一般会将字体的大分类，指定为font-family中的最后一个字体 ,用来兜底

4:font-style可以用来设置文字的斜体

         - 可选值：

                 normal，默认值，文字正常显示        

                 italic [i'tælik] 文字会以斜体显示

                oblique [ə'bli:k]文字会以倾斜的效果显示

         - 大部分浏览器都不会对倾斜和斜体做区分，

                      也就是说我们设置italic和oblique它们的效果往往是一样的

         一般我们只会使用italic

5:font-weight可以用来设置文本的加粗效果：

             可选值：

                 normal，默认值，文字正常显示

                 bold，文字加粗显示

                100-900之间的9个值，

                        但是由于用户的计算机往往没有这么多级别的字体，所以达到我们想要的效果

也就是200有可能比100粗，300有可能比200粗，但是也可能是一样的

6:font-variant ['vεəriənt] 可以用来设置小型大写字母

       可选值：

                normal，默认值，文字正常显示

                small-caps 文本以小型大写字母显示

                        小型大写字母：将所有的字母都以大写形式显示，但是小写字母的大写， 要比大写字母的大小小一些。

在CSS中还为我们提供了一个样式叫font，使用该样式可以同时设置字体相关的所有样式,可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开，使用font设置字体样式时，斜体 加粗 小大字母，没有顺序要求，甚至可写可不写，

如果不写则使用默认值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式

实际上使用简写属性也会有一个比较好的性能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.p1{
				color: red;
				font-size: 30px;
				font-family: "微软雅黑";
				font-style: italic;
				font-weight: bold;
				font-variant: small-caps ;
			}
			
			.p2{
				color: red;
				/*设置一个文字大小*/
				font-size: 50px;
				/*设置一个字体*/
				font-family: 华文彩云;
				/*设置文字斜体*/
				font-style: italic;
				/*设置文字的加粗*/
				font-weight: bold;
				/*设置一个小型大写字母*/
				font-variant: small-caps;
			}
			
			.p3{
				/* font: small-caps bold italic 60px "微软雅黑"; */
				font: 60px "微软雅黑";

			}
			
			
		</style>
	</head>
	<body>
		
		<p class="p3">我是一段文字我是一段文字我是一段文字，ABCDEFGabcdefg</p>
		
		<p class="p1">我是一段文字，ABCDEFGabcdefg</p>
		
		<p class="p2">我是一段文字，ABCDEFGabcdefg</p>
	</body>
</html>

相关文章