自定义 CSS 字体安装答案

【问题标题】：Custom CSS Font installation自定义 CSS 字体安装
【发布时间】：2015-07-27 02:25:30
【问题描述】：

我正在尝试在我的网站上安装自定义字体。字体为Lobster。我尝试安装字体的特定页面是here。我有一个 webkit 用于我的网站上已经托管的字体。

这是主要样式CSS的相关部分：

/***********************************************************************************

Universal Typography

************************************************************************************/

a {
    text-decoration: none;
}

@font-face {
    font-family: myFirstFont;
    src: url('lobster_1.3-webfont.eot');
    src: url('lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
         url('lobster_1.3-webfont.woff2') format('woff2'),
         url('lobster_1.3-webfont.woff') format('woff'),
         url('lobster_1.3-webfont.ttf') format('truetype'),
         url('lobster_1.3-webfont.svg#lobster_1.3regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/***********************************************************************************

Sections

************************************************************************************/

section {
    padding: 0 39px;
}

/***********************************************************************************

Gallery

************************************************************************************/

.gallery {
    width: 100%;
    float: left;
    padding: 99px 0 0;
    position: relative;
}

.gallery:last-of-type {
    padding-bottom: 39px;
}

/***********************************************************************************

Gallery Typography

************************************************************************************/

.gallery h2 {

    font-family:myFirstFont;
    font-size: 20px;
    line-height: 15px;
    font-weight: 100;
    color: #444444;
    position: absolute;
    top: 65px;
    left: 0;
}

.gallery h2 span {
    font-weight: 300;
}

这是页面的 HTML 代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <!-- Title: Change the title and description to suit your needs. -->
        <title>Logos</title>
        <!-- Description: Change the title and description to suit your needs. -->
        <meta name="description" content="Logos by Orange Juice Diaries.">

        <!-- Viewport Meta: Just taming mobile devices like iPads and iPhones. -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Google Fonts: The default font for this template. -->
        <link href='http://www.orangejuicediaries.com/webfontkit-20150726-133737/stylesheet.css' rel='stylesheet' type='text/css'>

        <!-- Styles: The primary styles for this template. -->
        <link rel="stylesheet" href="assets/styles/normalize.css">
        <link rel="stylesheet" href="assets/styles/main.css">
        <link rel="stylesheet" href="assets/styles/mobile.css">

        <!-- Favicon: Change to whatever you like within the "assets/images" folder. -->
        <link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon" />
    </head>

    <body>
        <section id="gallery">
            <!-- Gallery: Just a sample "medium" sized gallery. -->

            <!-- Gallery: Just a sample "small" sized gallery. -->
            <div class="gallery small">
                <h2><span>Logos</span> All logos remain the property of their respective commissioners.</h2>
                <a style="background-image: url('assets/photos/EmpathinkV3cleaned.png');" href="assets/photos/EmpathinkV3cleaned.png"></a>
            </div>


        </section>

        <!-- Required Scripts: Not too much needed for Gallery. -->
        <script src="https://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
        <script src="assets/scripts/main.js"></script>
    </body>
</html>

我已经用谷歌搜索并检查了 W3，但无法确定我在哪里搞砸了。我将不胜感激！

【问题讨论】：

控制台会告诉你你需要知道的一切。字体文件返回 404（即检查文件的路径是否正确）。
你的字体和你的 stylesheet.css 文件在同一个文件夹吗？
你需要在像body这样的元素上声明字体系列
谢谢大家！塞缪尔和阿库尔拥有它！

标签： html css fonts

【解决方案1】：

好的，你有 stylesheet.css 包含在 css 中的字体，代码如下：

@font-face {
    font-family: lobster_1.3regular;
    src: url('lobster_1.3-webfont.eot');
    src: url('lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
         url('lobster_1.3-webfont.woff2') format('woff2'),
         url('lobster_1.3-webfont.woff') format('woff'),
         url('lobster_1.3-webfont.ttf') format('truetype'),
         url('lobster_1.3-webfont.svg#lobster_1.3regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

在 main.css 中，您可以使用以下代码在 css 中包含字体：

@font-face {
    font-family: myFirstFont;
    src: url('lobster_1.3-webfont.eot');
    src: url('lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
         url('lobster_1.3-webfont.woff2') format('woff2'),
         url('lobster_1.3-webfont.woff') format('woff'),
         url('lobster_1.3-webfont.ttf') format('truetype'),
         url('lobster_1.3-webfont.svg#lobster_1.3regular') format('svg');
    font-weight: normal;
    font-style: normal;

}

在你的 .gallery h2css 中，你调用 Font font-family: myFirstFont;。但是您的字体文件与 main.css 不在同一个文件夹中。因此，或者更改 main.css 中的字体路径或使用 font-family: lobster_1.3regular; 调用 .gallery h2 中的字体系列。

【讨论】：