HTML字体

2023-10-30 45

一、HTML字体结构

在CSS中,字体可以通过 font 属性来设置,它可以接受一个由字体名或字体族名组成的列表。当浏览器需要显示网页时,它会从这个列表中选择第一个可用的字体。使用 CSS 可以将字体应用于不同的 HTML 元素,为元素设置样式规则分别是<style>、<head>、<link>、<head>、<h2>等。

示例:

<h2>Education</h2>

该标题自动以绿色、30 磅、斜体字体呈现:

span.example{color:green; font-size:30pt; font-style:italic;}Education

二、标题字体

<h#> ... </h#> #=1, 2, 3, 4, 5, 6

<hn>—</hn> 这些标记显示黑体字。 <hn>—</hn> 这些标记自动插入一个空行,不必用 < p> 标记再加空行。

因此在一行中无法使用不同大小的字体。

三、字体大小

用字体大小属性(size)来设定字体的大小。

<font size=#> ... </ font> #=1, 2, 3, 4, 5, 6, 7 or +#, -#
<basefont size=#> #=1, 2, 3, 4, 5, 6, 7

示例代码:

<font size=3>站长百科</font>
<font size=2>站长百科</font>
<font size=1>站长百科</font>

四、字体颜色

指定颜色 <font color=#> … </font> #=rrggbb 16 进制数码,或者是下列预定义色彩: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

示例代码如下:

<font color=Yellow>站长百科</font>
<font color=red>站长百科</font>

五、页面字体

为整个网页设置字体属性只需要定位正确的元素即可。假设我们希望整个页面使用通用的无衬线系统字体,可以通过这个 CSS 声明来做到这一点:

body { font-family: sans-serif; }

对网页上的字体进行全局 CSS 声明的一个常见原因是使字体颜色与全局背景颜色兼容。在这种情况下,我们可以使用 CSS 设置所有样式属性,并将它们全局应用于整个网页。例如,以下代码将页面的背景色设置为黑色,将字体设置为白色,将字体系列设置为无衬线。它还将链接颜色设置为白色,将访问的链接颜色设置为黄色。

body { color: white; background-color: black; font-family: sans-serif; } a { color: white; } a:visited { color: yellow; }

六、HTML字体类别

HTML中包含以下几种不同类别的字体:

  • 衬线和无衬线:有些字母的末尾是平淡的,而另一些字母的末尾有一个短笔画,这些短笔画称为衬线,而无衬线字体没有;
  • 字体和手写字体:对于具有个性的某种类型的网站来说,手写字体可能是一个不错的选择,但只能用于标题和徽标,而不能用于段落或列表;
  • 等宽字体:每个字符占用相同水平空间的字体称为等宽字体;
  • 显示和装饰字体:显示和装饰字体是引人注目的字体设计,旨在限制徽标和顶级标题的使用。

七、构建字体堆栈

并非所有浏览器和操作系统都能够呈现所有字体。因此,在选择字体时,需要指定后备字体样式,这是通过使用 CSS 属性构建字体堆栈来完成的。

通常,字体堆栈将包含至少三个字体选项:

  • 选择作为设计字体的 Web 字体;
  • 预安装在几乎所有浏览器和操作系统上的回退通用字体;
  • 浏览器可用于从系统上可用的字体中选择字体的通用字体系列。在实践中,段落元素的字体堆栈可能如下所示:font-family。
p { font-family: "Open Sans", Tahoma, sans-serif; }

八、字体堆栈语法

HTML属性值需要使用引号括起来,当字体名称包含空格或特殊字符时,需要将其括在引号中。在大多数情况下,双引号和单引号都可以使用。尽管在内联样式中可以添加字体,但通常更推荐将字体样式定义放在外部CSS样式表中。虽然在极少数情况下可能会使用内联样式来添加字体,但通常建议将字体的样式定义放在外部CSS样式表中,以便实现更好的代码组织和维护。

  • 广告合作

  • QQ群号:707632017

温馨提示:
1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com(#改为@)。 2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。
HTML字体
上一篇: HTML图像
HTML字体
下一篇: HTML Wed字体