<section class="px16">
  <p>左がメイリオ、右が Noto Sans JP を display: flex で比較。</p>
  <p>左右の丸は 16px の SVG。</p>
  <p class="flex">
    <svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#000"  />
    <span class="meiryo">愛</span>
    <span class="noto">愛</span>

    <svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#000"  />
  </p>
  
  <dl>
    <dt>font-family 指定なし</dt>
    <dd>タニシに愛嬌</dd>
    <dt>font-family: sans-serif</dt>
    <dd class="sans-serif">タニシに愛嬌</dd>
    <dt>font-family: Meiryo</dt>
    <dd class="meiryo">タニシに愛嬌</dd>
    <dt>font-family: "Noto Sans JP"</dt>
    <dd class="noto-sans">タニシに愛嬌<dd>
    <dt>font-family: "Noto Serif JP"</dt>
    <dd class="noto-serif">タニシに愛嬌</dd>
    </dl>
  
  <hr />
  <p>
    左がメイリオ、右が Noto Sans JP を display: flex で比較。<br />
    左右の丸は 16px の SVG。<br />
    text-box: trim-both ex alphabetic でトリミング。
  </p>
  <p>
  <p class="flex">
    <svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#000"  />
    <span class="meiryo trim">愛</span>
    <span class="noto trim">愛</span>

    <svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="8" fill="#000"  />
  </p>
</section>

.px16 {
  font-size: 16px;
}

svg {
  width: 16px;
  height: 16px;
}

.flex {
  display: flex;
  line-height: 1;
  align-items: center;
}

.sans-serif {
  font-family: sans-serif;
}

.meiryo {
  font-family: Meiryo;
}

.noto-sans {
  font-family: "Noto Sans JP";
}

.noto-serif {
  font-family: "Noto Serif JP";
}

.trim {
    text-box: trim-both ex alphabetic;
}