CSS 怎么引入TTF字体|极客教程

CSS 怎么引入TTF字体

在网页设计中，字体的选择对于页面的整体风格和用户体验起着至关重要的作用。而TTF（TrueType Font）字体是一种常见的字体格式，可以在网页中使用。本文将详细介绍如何在CSS中引入TTF字体，并提供多个示例代码供参考。

1. 在CSS中使用@font-face引入TTF字体

在CSS中，可以使用@font-face规则来引入外部字体文件，包括TTF格式的字体文件。@font-face规则允许开发者定义自定义字体，以便在网页中使用。下面是一个简单的示例代码，演示如何使用@font-face引入TTF字体：

@font-face {
    font-family: 'CustomFont';
    src: url('fonts/customfont.ttf') format('truetype');
}

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

在上面的示例代码中，我们定义了一个名为CustomFont的自定义字体，并指定了TTF格式的字体文件路径。然后在body元素中使用该自定义字体。

2. 在HTML中引入CSS文件

为了让上述CSS代码生效，我们需要在HTML文件中引入该CSS文件。下面是一个简单的HTML示例代码：

<!DOCTYPE html>
<html lang="en">
<style>
@font-face {
    font-family: 'CustomFont';
    src: url('fonts/customfont.ttf') format('truetype');
}

body {
    font-family: 'CustomFont', sans-serif;
}
</style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using TTF Font in CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to Geek-Docs</h1>
    <p>This is a sample paragraph using the custom TTF font.</p>
</body>
</html>

代码运行结果:

CSS 怎么引入TTF字体

在上面的示例代码中，我们引入了名为styles.css的CSS文件，其中包含了我们之前定义的@font-face规则。

3. 示例代码：引入多个TTF字体

除了引入单个TTF字体外，我们还可以同时引入多个TTF字体文件，并在不同的元素中使用不同的字体。下面是一个示例代码，演示如何引入多个TTF字体：

@font-face {
    font-family: 'CustomFont1';
    src: url('fonts/customfont1.ttf') format('truetype');
}

@font-face {
    font-family: 'CustomFont2';
    src: url('fonts/customfont2.ttf') format('truetype');
}

h1 {
    font-family: 'CustomFont1', sans-serif;
}

p {
    font-family: 'CustomFont2', sans-serif;
}

在上面的示例代码中，我们定义了两个不同的自定义字体CustomFont1和CustomFont2，并在h1和p元素中分别使用这两个字体。

4. 示例代码：使用字体的不同样式和粗细

除了引入TTF字体外，我们还可以通过@font-face规则定义字体的不同样式和粗细。下面是一个示例代码，演示如何定义不同样式和粗细的TTF字体：

@font-face {
    font-family: 'CustomFontRegular';
    src: url('fonts/customfont-regular.ttf') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: 'CustomFontBold';
    src: url('fonts/customfont-bold.ttf') format('truetype');
    font-weight: bold;
}

h1 {
    font-family: 'CustomFontRegular', sans-serif;
}

p {
    font-family: 'CustomFontBold', sans-serif;
}

在上面的示例代码中，我们定义了两个不同样式和粗细的TTF字体CustomFontRegular和CustomFontBold，并在h1和p元素中分别使用这两个字体。

5. 示例代码：使用字体的不同字重

除了定义字体的粗细外，我们还可以通过@font-face规则定义字体的不同字重（weight）。下面是一个示例代码，演示如何定义不同字重的TTF字体：

@font-face {
    font-family: 'CustomFontLight';
    src: url('fonts/customfont-light.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'CustomFontRegular';
    src: url('fonts/customfont-regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'CustomFontBold';
    src: url('fonts/customfont-bold.ttf') format('truetype');
    font-weight: 700;
}

h1 {
    font-family: 'CustomFontLight', sans-serif;
    font-weight: 300;
}

p {
    font-family: 'CustomFontRegular', sans-serif;
    font-weight: 400;
}

strong {
    font-family: 'CustomFontBold', sans-serif;
    font-weight: 700;
}

在上面的示例代码中，我们定义了三个不同字重的TTF字体CustomFontLight、CustomFontRegular和CustomFontBold，并在h1、p和strong元素中分别使用这三个字体。

6. 示例代码：使用字体的不同样式

除了定义字体的粗细和字重外，我们还可以通过@font-face规则定义字体的不同样式（style）。下面是一个示例代码，演示如何定义不同样式的TTF字体：

@font-face {
    font-family: 'CustomFontItalic';
    src: url('fonts/customfont-italic.ttf') format('truetype');
    font-style: italic;
}

@font-face {
    font-family: 'CustomFontOblique';
    src: url('fonts/customfont-oblique.ttf') format('truetype');
    font-style: oblique;
}

em {
    font-family: 'CustomFontItalic', sans-serif;
    font-style: italic;
}

i {
    font-family: 'CustomFontOblique', sans-serif;
    font-style: oblique;
}

在上面的示例代码中，我们定义了两个不同样式的TTF字体CustomFontItalic和CustomFontOblique，并在em和i元素中分别使用这两个字体。

7. 示例代码：使用字体的不同变体

除了定义字体的样式和粗细外，我们还可以通过@font-face规则定义字体的不同变体（variant）。下面是一个示例代码，演示如何定义不同变体的TTF字体：

@font-face {
    font-family: 'CustomFontSmallCaps';
    src: url('fonts/customfont-smallcaps.ttf') format('truetype');
    font-variant: small-caps;
}

abbr {
    font-family: 'CustomFontSmallCaps', sans-serif;
    font-variant: small-caps;
}

在上面的示例代码中，我们定义了一个小型大写字母变体的TTF字体CustomFontSmallCaps，并在abbr元素中使用该字体。

8. 示例代码：使用字体的不同拉伸

除了定义字体的样式、粗细和变体外，我们还可以通过@font-face规则定义字体的不同拉伸（stretch）。下面是一个示例代码，演示如何定义不同拉伸的TTF字体：

@font-face {
    font-family: 'CustomFontCondensed';
    src: url('fonts/customfont-condensed.ttf') format('truetype');
    font-stretch: condensed;
}

@font-face {
    font-family: 'CustomFontExpanded';
    src: url('fonts/customfont-expanded.ttf') format('truetype');
    font-stretch: expanded;
}

h1 {
    font-family: 'CustomFontCondensed', sans-serif;
    font-stretch: condensed;
}

p {
    font-family: 'CustomFontExpanded', sans-serif;
    font-stretch: expanded;
}

在上面的示例代码中，我们定义了两个不同拉伸的TTF字体CustomFontCondensed和CustomFontExpanded，并在h1和p元素中分别使用这两个字体。

9. 示例代码：使用字体的不同变体和样式

结合前面介绍的字体样式、粗细、变体和拉伸，我们可以创建出各种不同风格的字体。下面是一个示例代码，演示如何结合使用不同字体属性：

@font-face {
    font-family: 'CustomFontBoldItalic';
    src: url('fonts/customfont-bolditalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'CustomFontSmallCapsBold';
    src: url('fonts/customfont-smallcapsbold.ttf') format('truetype');
    font-variant: small-caps;
    font-weight: bold;
}

h1 {
    font-family: 'CustomFontBoldItalic', sans-serif;
}

p {
    font-family: 'CustomFontSmallCapsBold', sans-serif;
}

在上面的示例代码中，我们定义了两个结合了不同字体属性的TTF字体CustomFontBoldItalic和CustomFontSmallCapsBold，并在h1和p元素中分别使用这两个字体。

10. 示例代码：使用Google Fonts引入TTF字体

除了引入本地的TTF字体文件外，我们还可以通过Google Fonts等在线服务引入TTF字体。下面是一个示例代码，演示如何使用Google Fonts引入TTF字体：

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap');

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

在上面的示例代码中，我们通过@import规则引入了Google Fonts中的Roboto字体，并在body元素中使用该字体。

通过以上示例代码，我们详细介绍了如何在CSS中引入TTF字体，并展示了多种不同的使用场景和效果。希望本文能帮助您更好地掌握在网页设计中使用TTF字体的技巧和方法。