css - 如何在 CSS 中使用下载的图像或字体（zip 文件）

作为初学者，我将逐步向您解释一切。

一开始你必须解压压缩文件sansationlight.zip

右键单击sansationlight.zip，然后单击提取文件

您将获得以下窗口

点击确定

您将获得sansationlight文件夹

在 index.html 文件旁边创建一个文件夹并将其命名为Fonts

将解压出来的文件夹sansationlight复制到Fonts文件夹

复制

粘贴到字体文件夹

将以下样式代码添加到 index.html 文件中的样式标记中：

@font-face {
    font-family: 'SansationLight';
    src: url('Fonts/SansationLight/SansationLight.eot');
    src: url('Fonts/SansationLight/SansationLight.eot?#iefix') format('embedded-opentype'),
         url('Fonts/SansationLight/SansationLight.woff') format('woff'),
         url('Fonts/SansationLight/SansationLight.ttf') format('truetype'),
         url('Fonts/SansationLight/SansationLight.svg#SansationLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

div{
    font-family: 'SansationLight';
}

在这里，您将看到代码在 HTML 页面上的显示方式：

结果：

这是添加样式代码之前的字体：

如果要使用外部样式文件，请按照下列步骤操作：

将sansationlight文件夹复制到Fonts文件夹后，在Fonts文件夹旁边创建另一个文件夹，将其命名为stylesheets

在stylesheets文件夹中，创建style.css文件并打开它。

将以下代码复制到 style.css 文件中：

@font-face {
    font-family: 'SansationLight';
    src: url('../Fonts/SansationLight/SansationLight.eot');
    src: url('../Fonts/SansationLight/SansationLight.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/SansationLight/SansationLight.woff') format('woff'),
         url('../Fonts/SansationLight/SansationLight.ttf') format('truetype'),
         url('../Fonts/SansationLight/SansationLight.svg#SansationLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

.mydiv{


font-family: 'SansationLight';
}

注意，我已经从样式表 文件夹中添加../了一步

在这里，您可以看到代码将如何出现在您的 style.css 文件中：

要将 style.css 文件与 index.html 链接，请使用 index.html 中的链接标签：

<link rel="stylesheet" type="text/css" href="stylesheets/style.css">

这就是代码在 index.html 文件中的显示方式：

注意在第一种方式中，我为所有 div 设置了字体样式 div{ }

第二种方式，使用类.mydiv

添加图像：

在 index.html 文件旁边创建一个文件夹并将其命名为images

将要使用的图像添加到图像文件夹

使用<img>标签添加图片

<img src="images/image.jpg" style="width: 50%; height: 50%">

结果：

有用的链接：

css - 如何在 CSS 中使用下载的图像或字体（zip 文件）

问题描述

解决方案

推荐阅读