Почему один и тот же шрифт не выглядит одинаково с одинаковым весом шрифта?

Question

Я хочу перекодировать этот шаблон на практике. Я скачал его шрифт "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>

Answer 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>