一、在CSS中更改字体的基本语法
要在CSS中更改字体,需要使用@font-face
规则和font-family
属性。其中,@font-face
规则用于定义自定义字体,而font-family
属性用于将定义的自定义字体应用于HTML元素中的文字。
1.定义自定义字体@font-face
在定义自定义字体时,需要通过src
属性指定字体文件的路径,并通过font-family
属性给自定义字体命名。以下是一个示例:
@font-face {
font-family: "MyFont";
src: url("MyFont.ttf") format("truetype");
}
上面的代码定义了一个名为MyFont
的自定义字体,并引用了一个名为MyFont.ttf
的字体文件,该字体文件位于CSS文件所在的目录中。
2.应用自定义字体font-family
在定义好自定义字体后,可以通过font-family
属性将自定义字体应用于HTML元素中的文字。以下是一个将自定义字体应用于元素的示例:
p {
font-family: "MyFont";
}
上面的代码将定义好的MyFont
字体应用于所有的元素中的文字。
二、应用浏览器内置字体
在不定义自定义字体的情况下,也可以通过font-family
属性应用浏览器内置的字体。以下是一些常见的浏览器内置字体:
Arial
Times New Roman
Courier New
Verdana
Georgia
Trebuchet MS
例如,将Verdana
字体应用于元素:
p {
font-family: Verdana, sans-serif;
}
sans-serif
是一个通用的字体族名称,用于在无法加载指定字体时显示一种合适的字体。在上面的例子中,如果无法加载Verdana
字体,则会显示浏览器中的另一种合适的字体。
三、更改字体大小font-size
属性
在CSS中有一个属性叫做font-size
,用于更改字体的大小。该属性的值可以是一个具体的像素值,也可以是一些相对于父元素或文本流的单位。
以下是一些常见的font-size
单位:
px(像素)
em(相对于父元素的字体大小)
rem(相对于根元素的字体大小)
%(相对于父元素的字体大小)
例如,将font-size
属性设置为16px
:
p {
font-size: 16px;
}
上面的代码将元素中的文字大小设置为16像素。
四、更改字体样式font-style
属性
font-style
属性用于更改文字的样式。该属性的值可以是normal
、italic
或oblique
。以下是一个示例:
p {
font-style: italic;
}
上面的代码将元素中的文字设置成斜体。
五、更改字体粗细font-weight
属性
font-weight
属性用于更改字体的粗细。该属性的值可以是normal
、bold
或一个数值。数值越大,字体越粗。以下是一个示例:
p {
font-weight: bold;
}
上面的代码将元素中的文字设置成加粗。
六、更改字体颜色color
属性
color
属性用于更改文字的颜色。该属性的值可以是一个具体的颜色值,也可以是一个颜色关键字。以下是一个示例:
p {
color: red;
}
上面的代码将元素中的文字颜色设置成红色。
七、总结
通过使用@font-face
规则和font-family
属性,可以在CSS中定义和应用自定义字体。在不使用自定义字体的情况下,可以通过font-family
属性应用浏览器内置的字体。
除了font-family
属性,还可以使用font-size
、font-style
、font-weight
和color
等属性更改字体的大小、样式、粗细和颜色。