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

【问题标题】：How to use downloaded image or font(zip file) in CSS如何在 CSS 中使用下载的图像或字体（zip 文件）
【发布时间】：2018-11-21 23:47:46
【问题描述】：

一个初学者问题：我知道如何使用在线图片--复制粘贴到 url，但不知道下载后如何使用。我将字体下载为 zip 文件，但我不知道在 url 中放什么，图像的相同问题。谢谢。

【问题讨论】：

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

标签： css custom-font

【解决方案1】：

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

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

右击 sansationlight.zip 然后点击解压文件

你会得到以下窗口

点击确定

你会得到sansationlight文件夹

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

将解压后的sansationlight文件夹复制到Fonts文件夹中

复制

粘贴到字体文件夹

在 index.html 文件中的 style 标签中添加以下样式代码：

@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

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

使用<img>标签添加图片

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

结果：

有用的链接：

【讨论】：

【解决方案2】：

好的，听起来您正在尝试将图像添加到网站。您的图片需要托管在某个地方才能在网站上使用。

当您使用 Internet 上已有图片的 URL 时，该图片由其他人托管。

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

根据您用于构建它的软件，有时您可以将图像拖放到您的网页中，剩下的工作将由软件完成。

【讨论】：

【解决方案3】：

您网站上的图片

正如 Andrew 所说，为了在您的网站中使用图片，图片应该位于网络上的任何位置。

您可以使用 Amazon S3 来存储您的网站图像。 https://aws.amazon.com/s3/.

一旦你获得了图片的在线 url，你就可以在你的 html 中使用它，只需将它粘贴到 img 标签的 src 属性上。

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

您网站上的自定义字体

现在，如果您想在您的网站上使用自定义字体，您应该将您的字体文件粘贴到您的网站文件夹中并创建如下的 css3 规则：

@font-face {
    font-family: myfont;
    src: url(route/to/your/font/my_font.woff);
}

然后，如果你想使用字体，例如在你所有的 h2 标签上：

h2 {
    font-family: myfont;
}

希望对你有所帮助。

【讨论】：