指定字体系列重量/倾斜/样式？

Question

So I'm using a font family for header text (Aileron to be specific), and the font family has various weights such as "Light", "Bold", "ExtraBold", and whatnot. How would you declare the specific weight in CSS?

This is my code:

h1{
    font-family:Aileron-Black;
    font-size:49pt;
    letter-spacing:-3px;
    color:white;
}

I would experiment with taking off the hyphen and putting the name of the family in quotation marks, but nothing seems to do the trick.

Answer 1

First, incloude the font via CSS in Bold and Thin:

@font-face {
  font-family: 'Aileron';
  font-style: normal;
  font-weight: 100;
  src: local('Aileron' ), url('path/to/font/Aileron.woff') format('woff'); }

@font-face {
 font-family: 'Aileron';
 font-style: normal;
 font-weight: 800;
 src: local('Aileron-Black' ), url('path/to/font/Aileron-Black.woff') format('woff'); }

Then declare the font-weight you want to use by using the font-weight propety. For Bold font use 800:

h1{ 
 font-family:'Aileron';
 font-size:49pt; 
 letter-spacing:-3px;
 color:white;
 font-weight: 800; }

Or for thin font use 100:

h1{ 
 font-family:'Aileron';
 font-size:49pt; 
 letter-spacing:-3px;
 color:white;
 font-weight: 100; }

Answer 2

You need to use the font-weight property, it takes either a numerical value or a keyword value (such as normal or bold). You need to look up in your CSS code for the font-face declaration of the font you are using, there you will see the specific font-weight .

Here you can find more information.

Regarding your case:

h1{
    font-family: "Aileron";
    font-size:49pt;
    font-weight: bold;
    letter-spacing:-3px;
    color:white;
}