html 黑体系ファミリーのウエイト别フォント名指定。

Posted 2021-05-11

/* Normal */
.helvetica-neue-ultra-light {
  font-family:
    'HelveticaNeueUltraLight',
    'HelveticaNeue-Ultra-Light',
    'Helvetica Neue Ultra Light',
    'HelveticaNeue',
    'Helvetica Neue',
    'TeXGyreHerosRegular',
    'Arial',
    sans-serif;
  font-weight: 100;
  font-stretch: normal;
}
.helvetica-neue-ultra-light-italic {
  font-family:
    'HelveticaNeueUltraLightItalic',
    'HelveticaNeue-Ultra-Light-Italic',
    'Helvetica Neue Ultra Light Italic',
    'HelveticaNeueUltraLight',
    'HelveticaNeue-Ultra-Light',
    'Helvetica Neue Ultra Light',
    'HelveticaNeue',
    'Helvetica Neue',
    'TeXGyreHerosRegular',
    'Arial',
    sans-serif;
  font-weight: 100;
  font-style: italic;
  font-stretch: normal;
}
.helvetica-neue-thin {
  font-family:
    'HelveticaNeueThin',
    'HelveticaNeue-Thin',
    'Helvetica Neue Thin',
    'HelveticaNeue',
    'Helvetica Neue',
    'TeXGyreHerosRegular',
    'Arial',
    sans-serif;
  font-weight: 200;
  font-stretch: normal;
}
.helvetica-neue-light {
  font-family:
    'HelveticaNeueLight',
    'HelveticaNeue-Light',
    'Helvetica Neue Light',
    'HelveticaNeue',
    'Helvetica Neue',
    'TeXGyreHerosRegular',
    'Helvetica',
    'Tahoma',
    'Geneva',
    'Arial',
    sans-serif;
  font-weight: 300;
  font-stretch: normal;
}
.helvetica-neue-light-italic {
  font-family:
    'HelveticaNeueLightItalic',
    'HelveticaNeue-Light-Italic',
    'Helvetica Neue Light Italic',
    'HelveticaNeueLight',
    'HelveticaNeue-Light',
    'Helvetica Neue Light',
    'HelveticaNeue',
    'Helvetica Neue',
    'TeXGyreHerosRegular',
    'Helvetica',
    'Tahoma',
    'Geneva',
    'Arial',
    sans-serif;
  font-weight: 300;
  font-style: italic;
  font-stretch: normal;
}
.helvetica-neue-regular {
  font-family:
    'HelveticaNeue',
    'Helvetica Neue',
    'HelveticaNeueRoman',
    'HelveticaNeue-Roman',
    'Helvetica Neue Roman',
    'TeXGyreHerosRegular',
    'Helvetica',
    'Tahoma',
    'Geneva',
    'Arial',
    sans-serif;
  font-weight: 400;
  font-stretch: normal;
}
.helvetica-neue-regular-italic {
  font-family:
    'HelveticaNeueItalic',
    'Helvetica Neue Italic',
    'HelveticaNeue-Italic',
    'HelveticaNeue',
    'Helvetica Neue',
    'HelveticaNeueRomanItalic',
    'HelveticaNeue-Roman-Italic',
    'Helvetica Neue Roman Italic',
    'HelveticaNeueRoman',
    'HelveticaNeue-Roman',
    'Helvetica Neue Roman',
    'TeXGyreHerosRegular',
    'Helvetica',
    'Tahoma',
    'Geneva',
    'Arial',
    sans-serif;
  font-weight: 400;
  font-style: italic;
  font-stretch: normal;
}
.helvetica-neue-medium {
  font-family:
    'HelveticaNeueMedium',
    'HelveticaNeue-Medium',
    'Helvetica Neue Medium',
    'HelveticaNeue',
    'Helvetica Neue',
    'TeXGyreHerosRegular',
    'Helvetica',
    'Tahoma',
    'Geneva',
    'Arial',
    sans-serif;
  font-weight: 500;
  font-stretch: normal;
}
.helvetica-neue-bold {
  font-family:
    'HelveticaNeueBold',
    'HelveticaNeue-Bold',
    'Helvetica Neue Bold',
    'HelveticaNeue',
    'Helvetica Neue',
    'TeXGyreHerosBold',
    'Helvetica',
    'Tahoma',
    'Geneva',
    'Arial',
    sans-serif;
  font-weight: 600;
  font-stretch: normal;
}
.helvetica-neue-bold-italic {
  font-family:
    'HelveticaNeueBoldItalic',
    'HelveticaNeue-Bold-Italic',
    'Helvetica Neue Bold Italic',
    'HelveticaNeueBold',
    'HelveticaNeue-Bold',
    'Helvetica Neue Bold',
    'HelveticaNeue',
    'Helvetica Neue',
    'TeXGyreHerosBold',
    'Helvetica',
    'Tahoma',
    'Geneva',
    'Arial',
    sans-serif;
  font-weight: 600;
  font-style: italic;
  font-stretch: normal;
}
.helvetica-neue-condensed-bold {
  font-family:
    'HelveticaNeueCondensedBold',
    'HelveticaNeue-CondensedBold',
    'Helvetica Neue Condensed Bold',
    'HelveticaNeueBold',
    'HelveticaNeue-Bold',
    'Helvetica Neue Bold',
    'HelveticaNeue',
    'Helvetica Neue',
    'TeXGyreHerosCnBold',
    'Helvetica',
    'Tahoma',
    'Geneva',
    'Arial Narrow',
    'Arial',
    sans-serif;*/
  font-weight: 600;
  font-stretch: condensed;
}
.helvetica-neue-condensed-black {
  font-family:
    'HelveticaNeueCondensedBlack',
    'HelveticaNeue-CondensedBlack',
    'Helvetica Neue Condensed Black',
    'HelveticaNeueBlack',
    'HelveticaNeue-Black',
    'Helvetica Neue Black',
    'HelveticaNeue',
    'Helvetica Neue',
    'TeXGyreHerosCnBold',
    'Arial Narrow',
    'Arial',
    sans-serif;
  font-weight: 800;
  font-stretch: condensed;
}

<!-- https://jsfiddle.net/rnbvonro/1/ -->
<html>
<head>
<title>Helvetica Family with MacOSX</title>
<meta charset="utf-8">
</head>
<body>
<h1 class="helvetica-neue-ultra-light">Helvetica Neue Ultra Light</h1>
<h1 class="helvetica-neue-ultra-light-italic">Helvetica Neue Ultra Light Italic</h1>
<h1 class="helvetica-neue-thin">Helvetica Neue Thin</h1>
<h1 class="helvetica-neue-light">Helvetica Neue Light</h1>
<h1 class="helvetica-neue-light-italic">Helvetica Neue Light Italic</h1>
<h1 class="helvetica-neue-regular">Helvetica Neue Regular</h1>
<h1 class="helvetica-neue-regular-italic">Helvetica Neue Regular Italic</h1>
<h1 class="helvetica-neue-medium">Helvetica Neue Medium</h1>
<h1 class="helvetica-neue-bold">Helvetica Neue Bold</h1>
<h1 class="helvetica-neue-bold-italic">Helvetica Neue Bold Italic</h1>
<h1 class="helvetica-neue-condensed-bold">Helvetica Neue Condensed Bold</h1>
<h1 class="helvetica-neue-condensed-black">Helvetica Neue Condensed Black</h1>
</body>
</html>