Question

我正在尝试在我的网站上安装自定义字体。字体是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>

我已经用Google搜索并检查了W3，但无法识别出我搞砸的地方。我将不胜感激任何帮助！

Answer 1

好的，你在这个代码的css中包含stylesheet.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 h2 css中调用字体font-family: myFirstFont;。但是您的字体文件与main.css不在同一个文件夹中。因此，或者使用.gallery h2更改main.css中的字体路径或font-family: lobster_1.3regular;中的字体系列。

自定义CSS字体安装

1 个答案: