dongxu7121 2016-09-14 06:33
浏览 88
已采纳

font-weight是不一致的?

EDIT: I'm really sorry I think I made a mistake. Now it is working as intended. The problem occured when I used div instead of span. I thought I changed and updated code, but apparently I didn't :(

I am new to HTML5/CSS and just getting into it. Today I ran into a problem concerning font-weight (I am using a web font). My PHP code looked like this:

echo '<p><strong>'.$name$.'</strong>, You made a reservation at <strong>'.$date.'</strong></p>'

and I have set CSS to (after CSS reset):

h1, p, input, table {
    font-family: "Noto Sans KR", serif;
    font-weight: 300;
}

p {
    font-size: 12pt;
    line-height: 180%;
}

strong {
    font-weight: 500;
    white-space: nowrap;
}

Then everything was right. The texts inside the strong tag looked bold. Then I tried to apply ellipsis in $name, so I changed PHP code to:

echo '<p><span class="inform-name ellipsis"><strong>'.$name.'</strong></span>, You made a reservation at <strong>'.$date.'</strong></p>'

and set CSS to:

.inform-name {
    display: inline-block;
    max-width: 18em;
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Then suddenly texts inside the strong tag does not look bold anymore. But strong tag is still applied. When I change font-weight to something like 800, text looks bold again, but other texts in strong (outside of p) looks even more thicker.

Does putting a span tag inside a p tag change something? I cannot understand what's happening here, and I tried searching but I couldn't find anything about this problem. Does anyone know why it's happening and how to fix it? Any help would be really appreciated.

  • 写回答

1条回答 默认 最新

  • dtuct88226 2016-09-14 06:51
    关注

    So, i'm not quite sure if this is what you're looking, but here is a solution that might help you with your problem

    First I declared the two variables $name and $date

    Then I removed the span tag.

    This is the code:

    PHP:

    $name = 'John Johnson';
    $date = '09-09-09';
    
    echo '<p class="inform-name ellipsis"><strong>'.$name.'</strong>, You made a reservation at <strong>'.$date.'</strong></p>';
    
    ?>
    

    CSS:

    <style>
        .inform-name {
        display: inline-block;
        max-width: 18em;
    }
    
    .ellipsis {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    
        h1, p, input, table {
        font-family: "Noto Sans KR", serif;
        font-weight: 300;
    }
    
    p {
        font-size: 12pt;
        line-height: 180%;
    }
    
    </style>
    

    And this is what I get from the code:

    enter image description here

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 拟通过pc下指令到安卓系统,如果追求响应速度,尽可能无延迟,是不是用安卓模拟器会优于实体的安卓手机?如果是,可以快多少毫秒?
  • ¥20 神经网络Sequential name=sequential, built=False
  • ¥16 Qphython 用xlrd读取excel报错
  • ¥15 单片机学习顺序问题!!
  • ¥15 ikuai客户端多拨vpn,重启总是有个别重拨不上
  • ¥20 关于#anlogic#sdram#的问题,如何解决?(关键词-performance)
  • ¥15 相敏解调 matlab
  • ¥15 求lingo代码和思路
  • ¥15 公交车和无人机协同运输
  • ¥15 stm32代码移植没反应