时间戳

首页 > 解决方案 > 为什么我的字体粗细和字母间距不能在 h1 之外工作？

html - 为什么我的字体粗细和字母间距不能在 h1 之外工作？

问题描述

对此非常陌生，并且尝试了几次修复都没有成功。

在 h1 中，我的字体都是正确的并且按预期反应：

h1 {
position:relative;
left: -10px;
top: -16px;
padding: 2em;
height: 3em;
width: 100%;
background: #545454;
font-family: "Avenir Light", sans-serif;
font-size: .7em;
text-align: center;
color: darkgray}

h1 p {
    font-weight: 30;
    word-spacing: 30px;}

但是文本在我页面上的其他任何地方都没有响应，即使在 body、body p 下插入每个单独的元素时也是如此……这让我发疯了！

body {
    margin: 0, 0;
    padding: 0, 0;
    overflow-x: hidden;
    background: #765264;
    color: white;
    font-family: "Avenir Light", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}


body p {
    font-size: 1em;
    font-family: "Century Gothic";
    font-weight: 30;
    letter-spacing: 1px;
}

奇怪的是，在上面插入 letter-spacing 似乎会使间距变大。

这是我的HTML，供参考：


    <head>
        <div class="header" id="myHeader">
        <h1>
        <link rel="stylesheet" href="peytonsite.css">
        <p>
        <img src="https://static.wixstatic.com/media/058e45_e590acfd22c440f4b5c89450738f321d~mv2.png/v1/fill/w_100,h_100,al_c,q_85,usm_0.66_1.00_0.01/058e45_e590acfd22c440f4b5c89450738f321d~mv2.webp">

            <a>HOME</a>
            <a>SKILLS</a>
            <a>PORTFOLIO</a>
            <a>EXPERIANCE</a>
            <a>CONTACT</a>

        </p>
        </h1>
        </div>
    </head>

    <article>

        <section id="LANDING">
            <img id="LongLogo" src="https://static.wixstatic.com/media/058e45_0291502c1e424532bbd24f9cfd50fd1e~mv2.png/v1/fill/w_1466,h_348,al_c,q_90,usm_0.66_1.00_0.01/Long%20Logo.webp">

            <p>PASSIONATE DESIGN</p>```

Please help!

标签： htmlcss

解决方案

更新： 30不是有效的字体粗细，并且您的字体可能不一定具有可用的粗体。

尝试：font-weight: bold; 或：font-weight: 300; （300 通常是非粗体）

h1 p {其他一些想法：您可能希望在第二个 CSS 块中使用逗号。

其次-您的目标文本是否在一个<p>块内？

出于调试目的，如果附加!important到样式会发生什么？这是否表明你想要什么？

如果您删除该h1 p { ...块，并将其添加到您的 CSS 底部会发生什么？

   p {
    font-weight: 300!important;
    word-spacing: 30px!important;}

如果没有任何变化，我怀疑您没有正确的 CSS 选择器。

这是您正确应用的 CSS 的 CodePen

推荐阅读