当前位置：首页 > 前端开发 > 正文

html如何引用字体样式

HTML中，可以通过` 标签引用外部CSS文件来定义字体样式，或使用`标签在HTML文档内部直接编写CSS。

HTML中引用字体样式有多种方法,以下是详细的介绍：

使用HTML标签直接设置字体样式

HTML本身提供了一些标签来设置文本的字体样式,不过这些标签现在已经不太推荐使用，因为它们不符合现代网页设计的最佳实践，但为了完整性还是在这里提及。

说明 示例
<font> 用于设置文本的字体、字号和颜色等属性，不过这是一个过时的标签，在HTML5中已不被支持。 <font face="Arial" size="4" color="red">这是红色的Arial字体文本</font>

使用CSS内联样式

CSS（层叠样式表）是控制网页外观的强大工具，内联样式是将CSS样式直接写在HTML元素的style属性中。

设置字体类型

通过font family属性来指定字体类型，可以设置多个字体名称作为备选，浏览器会按照顺序选择可用的字体。

<p style="font-family: 'Arial', sans-serif;">这段文本将首先尝试使用Arial字体，如果系统中没有该字体，则会使用无衬线字体（sans serif）作为替代。</p>

设置字体大小

使用font size属性来设置字体大小，可以使用像素（px）、百分比（%）、em或rem等单位。

  • 像素（px）：是一种固定的单位，如font size: 16px;表示字体大小为16像素。
  • 百分比（%）：是相对于父元素的字体大小而言的，如果父元素字体大小为16px，font size: 120%;则表示子元素字体大小为19.2px。
  • em：是相对于当前元素的字体大小。font size: 1em;表示和当前元素的字体大小相同，font size: 1.5em;表示当前元素字体大小的1.5倍。
  • rem：是相对于根元素（通常是<html>元素）的字体大小，如果根元素字体大小为16px，font size: 1rem;就是16px，font size: 2rem;就是32px。

示例：

<p style="font-size: 18px;">这段文本字体大小为18像素。</p>
<p style="font-size: 120%;">这段文本字体大小是父元素字体大小的120%。</p>
<p style="font-size: 1.5em;">这段文本字体大小是当前元素字体大小的1.5倍。</p>
<p style="font-size: 2rem;">这段文本字体大小是根元素字体大小的2倍。</p>

设置字体颜色

通过color属性来设置字体颜色，可以使用颜色名称（如red、blue等）、十六进制值（如#FF0000代表红色）、RGB值（如rgb(255,0,0)代表红色）或HSL值（如hsl(0,100%,50%)代表红色）来表示颜色。

示例：

<p style="color: red;">这段文本颜色为红色。</p>
<p style="color: #0000FF;">这段文本颜色为蓝色（十六进制表示）。</p>
<p style="color: rgb(0,128,0);">这段文本颜色为绿色（RGB表示）。</p>
<p style="color: hsl(120,100%,50%);">这段文本颜色为绿色（HSL表示）。</p>

设置字体粗细

使用font weight属性来设置字体粗细，常见的值有normal（正常粗细，相当于400）、bold（粗体，相当于700），也可以使用具体的数字（100 900之间的整数，100最细，900最粗）。

html如何引用字体样式 第1张

示例：

<p style="font-weight: bold;">这段文本是粗体。</p>
<p style="font-weight: 600;">这段文本字体粗细为600。</p>

设置字体风格

通过font style属性来设置字体风格，主要有两个值：normal（正常风格）和italic（斜体）。

示例：

<p style="font-style: italic;">这段文本是斜体。</p>

使用内部样式表（在<head>部分的<style>标签中）

内部样式表是将CSS样式写在HTML文档的<head>部分的<style>标签中，这样可以对整个文档中的多个元素应用相同的样式。

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            font-family: 'Times New Roman', serif;
            font-size: 16px;
            color: #333333;
            font-weight: normal;
            font-style: normal;
        }
        .special {
            font-family: 'Courier New', monospace;
            font-size: 18px;
            color: #FF6600;
            font-weight: bold;
            font-style: italic;
        }
    </style>
</head>
<body>
    <p>这是一段普通段落，使用了内部样式表中定义的p标签样式。</p>
    <p class="special">这是一段特殊样式的段落，使用了内部样式表中定义的.special类样式。</p>
</body>
</html>

在这个例子中,所有<p>标签都会应用第一种样式，而带有class="special"的<p>标签会应用第二种样式。

使用外部样式表

外部样式表是将CSS代码写在一个单独的.css文件中，然后在HTML文档中通过<link>标签引入，这种方法可以实现样式和内容的分离，方便多个页面共享相同的样式。

html如何引用字体样式 第2张

  1. 创建外部样式表文件

创建一个名为styles.css的文件，内容如下：

body {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    color: #333333;
}
h1 {
    font-family: 'Georgia', serif;
    font-size: 24px;
    color: #003366;
    font-weight: bold;
}
.highlight {
    font-family: 'Verdana', sans-serif;
    font-size: 18px;
    color: #FF0000;
    font-style: italic;
}
  1. 在HTML文档中引入外部样式表 
    <!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
 <h1>这是一个标题</h1>
 <p>这是一段正文内容，使用了外部样式表中定义的body样式。</p>
 <p class="highlight">这是一段高亮显示的文本，使用了外部样式表中定义的.highlight类样式。</p>
</body>
</html>

使用Web字体

我们可能需要使用一些特殊的字体,这些字体可能不在用户系统的默认字体列表中，这时可以使用Web字体。

使用Google Fonts

Google Fonts是一个提供大量免费字体的库，以下是使用Google Fonts的步骤：

  1. 在HTML文档的<head>部分添加Google Fonts的链接

    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

    这个链接会加载Roboto字体,你可以根据需要更改family参数来选择其他字体。

  2. 在CSS中使用该字体

    html如何引用字体样式 第3张

    body {
 font-family: 'Roboto', sans-serif;
}

使用其他Web字体服务或自定义字体

除了Google Fonts，还有其他一些Web字体服务，如Adobe Fonts等，如果你有自己的字体文件（如.ttf、.otf等），也可以使用@font-face规则来定义字体。

示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        @font-face {
            font-family: 'MyCustomFont';
            src: url('fonts/mycustomfont.ttf') format('truetype');
        }
        body {
            font-family: 'MyCustomFont', sans-serif;
        }
    </style>
</head>
<body>
    <p>这是一段使用自定义字体的文本。</p>
</body>
</html>

在这个例子中,假设你有一个名为mycustomfont.ttf的字体文件放在fonts文件夹下，通过@font face规则定义了字体家族为MyCustomFont，然后在CSS中将其应用于body元素，如果自定义字体无法加载，则会使用无衬线字体（sans serif）作为替代。

FAQs

问题1：如何在HTML中同时应用多种字体样式？

答：可以通过组合使用CSS属性来实现，你可以在一个元素上同时设置字体类型、大小、颜色、粗细和风格等多个属性。

<p style="font-family: 'Arial', sans-serif; font-size: 16px; color: red; font-weight: bold; font-style: italic;">这段文本同时应用了多种字体样式。</p>
```或者在使用内部或外部样式表时，在对应的选择器中定义多个字体相关的属性，如：
```css
.multiStyle {
    font-family: 'Times New Roman', serif;
    font-size: 18px;
    color: #0066CC;
    font-weight: 600;
    font-style: normal;
}
```然后在HTML元素中使用这个类，如`<p class="multiStyle">...</p>`。
问题2：为什么有些字体在网页上显示不出来？
答：可能有几个原因，一是用户系统中没有安装该字体，如果没有提供替代字体，就可能无法正确显示，二是字体文件路径错误（如果是自定义字体使用@font face规则），导致浏览器无法找到并加载字体文件。
ML 字体样式 引用
0

相关文章