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

一个初学者问题：我知道如何使用在线图像——复制粘贴到url中，但不知道下载后它是如何工作的。我下载了一个zip文件的字体，但我不知道在url中放什么，图像也是这样。谢谢

---

好的，听起来好像你在尝试向网站添加图像。你的图像需要被托管在某个地方才能在网站上使用

当您使用已在Internet上的URL时，该图像由其他人托管

如果您已经下载了它，您需要将其添加到您的web项目中，这意味着您将自己托管它。然后，它将使用URL引用图像并显示它，但该URL将位于您自己的域中

---

根据构建此功能所使用的软件，有时您可以将图像拖放到网页中，其余部分由软件完成。

网站上的图像

就像安德鲁说的，为了在你的网站上使用图像，图像应该在网络上的任何地方

您可以使用AmazonS3存储您的网站图像。

一旦你获得了图像的在线url，你可以在你的html上使用它，只要把它粘贴在一个img标签的src属性上就可以了

<img src="url/of/the/image">

然后，如果要在所有h2标记上使用字体，例如：

h2 {
    font-family: myfont;
}

---

希望能对你有所帮助。

作为初学者，我会一步一步地向你解释一切

开始时，必须解压缩压缩文件sansationlight.zip

右键单击sansationlight.zip，然后单击解压缩文件

您将获得以下窗口

单击确定

您将获得sanstationlight文件夹

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

将解压缩到Fonts文件夹的文件夹SanStationLight

抄袭

粘贴到字体文件夹中

将以下样式代码添加到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页面上：

结果是：

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

如果要使用外部样式文件，请执行以下步骤：

将sanstationlight文件夹复制到字体文件夹后，在字体文件夹旁边创建另一个文件夹，将其命名为样式表

在样式表文件夹中，创建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';
}

注意，我已经添加了

。/

，以使样式表后退一步 文件夹

在这里，您可以看到代码将如何显示在your 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文件链接到index.html，请使用index.html中的link标记：

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

结果是：

有用链接：

---

我不明白你的问题。你在复制粘贴什么，字体是什么？请添加更多详细信息和上下文。

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