为什么相同的字体在相同的字体粗细下看起来不一样？答案

【问题标题】：Why isn't the same font isn't looking the same with same font-weight?为什么相同的字体在相同的字体粗细下看起来不一样？
【发布时间】：2020-07-22 12:52:03
【问题描述】：

我想重新编码this template 作为练习。我下载了它的字体“HelveticaNeue Medium” 但是使用我的代码，它看起来比原始模板更大胆这是我的代码，我想实现更薄的代码

原来的样子，我要达到的效果：

用我的代码看起来更大胆：

@font-face {
  font-family: "HelveticaNeueMedium";
  src: url("../fonts/helveticaneuemedium-webfont.eot"); /* IE9 Compat Modes */
  src: url("../fonts/helveticaneuemedium-webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/helveticaneuemedium-webfont.otf") format("opentype"), /* Open Type Font */
    url("../fonts/helveticaneuemedium-webfont.svg") format("svg"), /* Legacy iOS */
    url("../fonts/helveticaneuemedium-webfont.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/helveticaneuemedium-webfont.woff") format("woff"), /* Modern Browsers */
    url("../fonts/helveticaneuemedium-webfont.woff2") format("woff2"); /* Modern Browsers */
  font-weight: normal;
  font-style: normal;
}
.container .content .sidebar .menu-wrapper .main-menu .main-menu-links{
  color: #000;
  font-family: 'HelveticaNeueMedium', Arial, sans-serif;
  font-size: 14px;
  line-height: .9;
  font-weight: 50;
  text-transform: uppercase;
}

<div class="container">
    <div class="content">
      <div class="sidebar">
        <div class="menu-wrapper">
<ul class="main-menu">
            <li class="main-menu-item"><a class="main-menu-links" href="#">Home<a/></li>
            <li class="main-menu-item"><a class="main-menu-links" href="#">Shop<a/></li>
            <li class="main-menu-item"><a class="main-menu-links" href="#">Product<a/></li>
            <li class="main-menu-item"><a class="main-menu-links" href="#">Cart<a/></li>
            <li class="main-menu-item"><a class="main-menu-links" href="#">Checkout<a/></li>
          </ul>
</div>
    </div>
</div>
    </div>

【问题讨论】：

它们的重量不同。 “模板”的地址是 font-weight: 400，而您的地址是 font-weight: 50。
谢谢，但“font-weight: 50”是我最后一次尝试得到适当的结果:)
当您将问题命名为“相同字体、相同重量”然后以不同重量显示具有相同字体的代码时，我不确定您对回答者的期望...如果您说 50 = = 400，计算机会说假，编码员会说，“计算机会告诉你那是假的”。 Edit您的问题，以便您的标题与代码匹配，或者代码与标题匹配。

标签： html css fonts font-size

【解决方案1】：

小心你写的是<a/>而不是</a>。

使用 WhatFont，font-weight 不是 50 而是 400。

也许您的浏览器将您的 50 视为 500，原因是它看起来更粗。你可以试试这个：

@font-face {
  font-family: "HelveticaNeueMedium";
  src: url("../fonts/helveticaneuemedium-webfont.eot"); /* IE9 Compat Modes */
  src: url("../fonts/helveticaneuemedium-webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/helveticaneuemedium-webfont.otf") format("opentype"), /* Open Type Font */
    url("../fonts/helveticaneuemedium-webfont.svg") format("svg"), /* Legacy iOS */
    url("../fonts/helveticaneuemedium-webfont.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/helveticaneuemedium-webfont.woff") format("woff"), /* Modern Browsers */
    url("../fonts/helveticaneuemedium-webfont.woff2") format("woff2"); /* Modern Browsers */
}

body{
  background-color: white;
}

.container .content .sidebar .menu-wrapper .main-menu .main-menu-links{
  color: #000;
  font-family: 'HelveticaNeueMedium', Arial, sans-serif;
  font-size: 14px;
  line-height: .9;
  font-weight: 400;
  text-transform: uppercase;
}

<div class="container">
   <div class="content">
      <div class="sidebar">
        <div class="menu-wrapper">
          <ul class="main-menu">
            <li class="main-menu-item"><a class="main-menu-links" href="#">Home</a></li>
            <li class="main-menu-item"><a class="main-menu-links" href="#">Shop</a></li>
            <li class="main-menu-item"><a class="main-menu-links" href="#">Product</a></li>
            <li class="main-menu-item"><a class="main-menu-links" href="#">Cart</a></li>
            <li class="main-menu-item"><a class="main-menu-links" href="#">Checkout</a></li>
          </ul>
        </div>
      </div>
   </div>
</div>

【讨论】：

感谢 Jerome W。我被告知“font-weight: 50”这是我最后一次尝试获得结果：D 但我不知道“a”标签。所以我纠正了它们，但没有区别！