如果CSS样式表的字体代码但是文本无法正常工作，该怎么办？

发布于 2025-02-03 19:57:35 字数 3758 浏览 2 评论 0原文

I had gotten help from a friend since I had started crying since I am still new and learning CSS for a class in college. 
We got to a certain point about three questions to the last step but the font for the headlines/titles for the playbills doesn't completely work. The one for Othello (play 3) worked completely, "The merry wives of Windsor" and " the importance of being Earnest" semi-works to where it started but didn't finish (play 1 and play 4). " A Streetcar named Desire" (play 2) does not work at all. Below is the coding for the title of each play:

 

       #play1 {
            background-color: hsl(240, 100%, 88%);
        }
        #play1 > h1 {
            font-family: Champagne, cursive;
        }
        #play2 {
            background-color: hsl(25,88%,73%);
        }
        #play2 > h1 {
            font-family: Grunge, "Times New Roman", Times, serif;
        }
        #play3 {
            background-color: hsl(0, 100%, 75%);
        }
        #play3 > h1 {
            font-family: Impact, Charcoal, sans-serif;
        }
        #play4 {
            background-color: hsl(296, 86%, 86%);
        }
        #play4 > h1 {
            font-family: Dobkin, cursive;
        }

如果您有任何想法或任何可能的更改，我们可以做出工作，请告诉我。谢谢！

编辑：这是HTML代码，我删除了记事本中的段落和任何单词，以更加专注于这个问题。

编辑2：我想在询问HTML代码时，我认为这是实际的HTML编码，但分配仅关注样式表。

样式表编码

@charset "utf-8";

@font-face {
    font-family: "font name";
    src: url('cac_champagne.woff') format('woff'),
    url('cac_champagne.tff') format('truetype');
}

@font-face {
    font-family: "font name";
    src: url('1942.woff') format('woff'),
    url('1942.tff') format('truetype');
}

@font-face {
    font-family: "font name";
    src: url('dobkinplain.woff') format('woff')
    url('dobkinplain.tff') format('truetype');
}


/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 2
   Case Problem 1
   
   PHCT Typographic Style Sheet

   Filename: ph_styles.css

*/

/* I have no idea what I am doing. */
/* Structural Styles */

html {
    background-color: hsl(91, 8%, 56%);
}

body {
    background-color: hsl(58, 31%, 84%)
    font-family: 'Palantino Linotype', 'Book Antiqua', Palatino, serif;
}

h1{
    color: black;
}
section > p{
    margin: 0px;
    padding-top: 5px;
    padding-right: 25px;
    padding-left: 25px;
    padding-bottom: 25px;
}

section > aside{
    font-size: 1.1em;
    text-align: center;
}

section > nav{
    font-size: 0.9em;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Navigation Styles */
nav > ul > li > a{
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
    padding-top: 10px;
    padding-bottom: 10px;
}

nav > ul > li > a:link, a:visited{
    color: white;
    text-decoration: none;
    background-color: hsla(0, 0%, 42%, 0.4);
}

nav > ul > li > a:hover, a:active{
    color: hsla(0, 0%, 100%, 0.7);
    background-color: hsl(0, 0%, 42%, 0.7);
}

/* Section Styles */
section.playbill h1{
    font-size: 3em;
    font-weight: normal;
    margin: 0px;
    padding-top: 20px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 20px;
}

#play1{
    background-color: hsl(240, 100%, 88%);
}
#play1 > h1{
    font-family: Champagne, cursive;
}
#play2{
    background-color: hsl(25,88%,73%);
}
#play2 > h1{
    font-family: Grunge, "Times New Roman", Times, serif;
}
#play3{
    background-color: hsl(0, 100%, 75%);
}
#play3 h1{
    font-family: Impact, Charcoal, sans-serif;
}
#play4{
    background-color: hsl(296, 86%, 86%);
}
#play4 > h1{
    font-family: Dobkin, cursive;
}

/* Description List Styles */

font-style: normal;
margin: 0px, 5 px, 25px

text-align: center;

原文

I had gotten help from a friend since I had started crying since I am still new and learning CSS for a class in college. 
We got to a certain point about three questions to the last step but the font for the headlines/titles for the playbills doesn't completely work. The one for Othello (play 3) worked completely, "The merry wives of Windsor" and " the importance of being Earnest" semi-works to where it started but didn't finish (play 1 and play 4). " A Streetcar named Desire" (play 2) does not work at all. Below is the coding for the title of each play:

 

       #play1 {
            background-color: hsl(240, 100%, 88%);
        }
        #play1 > h1 {
            font-family: Champagne, cursive;
        }
        #play2 {
            background-color: hsl(25,88%,73%);
        }
        #play2 > h1 {
            font-family: Grunge, "Times New Roman", Times, serif;
        }
        #play3 {
            background-color: hsl(0, 100%, 75%);
        }
        #play3 > h1 {
            font-family: Impact, Charcoal, sans-serif;
        }
        #play4 {
            background-color: hsl(296, 86%, 86%);
        }
        #play4 > h1 {
            font-family: Dobkin, cursive;
        }

If you have any idea or any possible changes we can make to make it work, please let me know. Thanks!

edit: this is the HTML code, I deleted the paragraphs and any words in a Notepad to be more focused on the question.

Edit 2: I thought when asking about the HTML code, I thought it was the actual Html coding, but the assignment solely focuses on the stylesheet.

the stylesheet coding

@charset "utf-8";

@font-face {
    font-family: "font name";
    src: url('cac_champagne.woff') format('woff'),
    url('cac_champagne.tff') format('truetype');
}

@font-face {
    font-family: "font name";
    src: url('1942.woff') format('woff'),
    url('1942.tff') format('truetype');
}

@font-face {
    font-family: "font name";
    src: url('dobkinplain.woff') format('woff')
    url('dobkinplain.tff') format('truetype');
}


/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 2
   Case Problem 1
   
   PHCT Typographic Style Sheet

   Filename: ph_styles.css

*/

/* I have no idea what I am doing. */
/* Structural Styles */

html {
    background-color: hsl(91, 8%, 56%);
}

body {
    background-color: hsl(58, 31%, 84%)
    font-family: 'Palantino Linotype', 'Book Antiqua', Palatino, serif;
}

h1{
    color: black;
}
section > p{
    margin: 0px;
    padding-top: 5px;
    padding-right: 25px;
    padding-left: 25px;
    padding-bottom: 25px;
}

section > aside{
    font-size: 1.1em;
    text-align: center;
}

section > nav{
    font-size: 0.9em;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Navigation Styles */
nav > ul > li > a{
    font-family: 'Trebuchet MS', Helvetica, sans-serif;
    padding-top: 10px;
    padding-bottom: 10px;
}

nav > ul > li > a:link, a:visited{
    color: white;
    text-decoration: none;
    background-color: hsla(0, 0%, 42%, 0.4);
}

nav > ul > li > a:hover, a:active{
    color: hsla(0, 0%, 100%, 0.7);
    background-color: hsl(0, 0%, 42%, 0.7);
}

/* Section Styles */
section.playbill h1{
    font-size: 3em;
    font-weight: normal;
    margin: 0px;
    padding-top: 20px;
    padding-right: 0px;
    padding-bottom: 10px;
    padding-left: 20px;
}

#play1{
    background-color: hsl(240, 100%, 88%);
}
#play1 > h1{
    font-family: Champagne, cursive;
}
#play2{
    background-color: hsl(25,88%,73%);
}
#play2 > h1{
    font-family: Grunge, "Times New Roman", Times, serif;
}
#play3{
    background-color: hsl(0, 100%, 75%);
}
#play3 h1{
    font-family: Impact, Charcoal, sans-serif;
}
#play4{
    background-color: hsl(296, 86%, 86%);
}
#play4 > h1{
    font-family: Dobkin, cursive;
}

/* Description List Styles */

font-style: normal;
margin: 0px, 5 px, 25px

text-align: center;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

━╋う一瞬間旳綻放 2025-02-10 19:57:35

<!DOCTYPE html>
<html>
<head>
<style>
#play1 {
    background-color: hsl(240, 100%, 88%);
}
#play1 > h1 {
    font-family: Champagne, cursive;
}
#play2 {
    background-color: hsl(25,88%,73%);
}
#play2 > h1 {
    font-family: Grunge, "Times New Roman", Times, serif;
}
#play3 {
    background-color: hsl(0, 100%, 75%);
}
#play3 > h1 {
    font-family: Impact, Charcoal, sans-serif;
}
#play4 {
    background-color: hsl(296, 86%, 86%);
}
#play4 > h1 {
    font-family: Dobkin, cursive;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<div id="play1"><h1>This is a paragraph, shown in the Champagne cursive..</h1></div>
<div id="play2"><h1>This is a paragraph, shown in the Grunge New Times.</h1></div>
<div id="play3"><h1>This is a paragraph, shown in the Impact Charcoal</h1></div>
<div id="play4"><h1>This is a paragraph, shown in the Dobkin cursive</h1></div>

</body>
</html>

因此，我查看了您的CSS，这似乎是正确的，因此我们需要检查您使用的内容的HTML。

<!DOCTYPE html>
<html>
<head>
<style>
#play1 {
    background-color: hsl(240, 100%, 88%);
}
#play1 > h1 {
    font-family: Champagne, cursive;
}
#play2 {
    background-color: hsl(25,88%,73%);
}
#play2 > h1 {
    font-family: Grunge, "Times New Roman", Times, serif;
}
#play3 {
    background-color: hsl(0, 100%, 75%);
}
#play3 > h1 {
    font-family: Impact, Charcoal, sans-serif;
}
#play4 {
    background-color: hsl(296, 86%, 86%);
}
#play4 > h1 {
    font-family: Dobkin, cursive;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<div id="play1"><h1>This is a paragraph, shown in the Champagne cursive..</h1></div>
<div id="play2"><h1>This is a paragraph, shown in the Grunge New Times.</h1></div>
<div id="play3"><h1>This is a paragraph, shown in the Impact Charcoal</h1></div>
<div id="play4"><h1>This is a paragraph, shown in the Dobkin cursive</h1></div>

</body>
</html>

So I looked at your CSS it seems correct so we need to check the html of what you used.

回复收藏 0 原文

~没有更多了~