html – 包括粗体不起作用的字体

我在下面的第一个代码片段中添加了’圆形’字体系列到我的网站,但它没有添加任何粗体,所以我尝试将粗体.ttf和.woff包含为粗体’圆形’字体但是我的两种方法都不起作用,第一种方法使所有文本都变粗,第二种方法根本没有做任何事情！

这是我如何在我的asp.net mvc网站的site.css文件中添加’循环’,它使所有文本循环,但不是粗体

@font-face {
    font-family: 'Circular';
    src: url('../fonts/circular-book.ttf') format('truetype');
    src: url('../fonts/circular-book.woff') format('woff');
    
}

body {
    font-family: Circular,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px !important;
    -webkit-font-smoothing: antialiased !important;
    color: #484848 !important;
}

在这里,我尝试添加粗体,但它使一切都大胆

@font-face {
    font-family: 'Circular';
    src: url('../fonts/circular-book.ttf') format('truetype');
    src: url('../fonts/circular-book.woff') format('woff');
    src: url('../fonts/circular-bold.ttf') format('truetype');
    src: url('../fonts/circular-bold.woff') format('woff');
    
}

body {
    font-family: Circular,sans-serif;
    font-size: 16px !important;
    -webkit-font-smoothing: antialiased !important;
    color: #484848 !important;
}

我尝试的最后一件事是添加一个新的’font-face’并将其包含在体内,但它不会将我的’font-weight：bold’css更改为粗体

@font-face {
    font-family: 'Circular';
    src: url('../fonts/circular-book.ttf') format('truetype');
    src: url('../fonts/circular-book.woff') format('woff');
    
}

@font-face {
    font-family: 'Circular-bold';
    src: url('../fonts/circular-bold.ttf') format('truetype');
    src: url('../fonts/circular-bold.woff') format('woff');
    
}

body {
    font-family: Circular,Circular-bold,sans-serif;
    font-size: 16px !important;
    -webkit-font-smoothing: antialiased !important;
    color: #484848 !important;
}

解决方法

@font-face {
   font-family: 'Circular';
   src: url('../fonts/circular-book.ttf') format('truetype');
   src: url('../fonts/circular-book.woff') format('woff');
}
@font-face {
   font-family: 'Circular'; /*same name,yes*/
   font-weight: bold; /*config its weight*/
   src: url('../fonts/circular-bold.ttf') format('truetype');
   src: url('../fonts/circular-bold.woff') format('woff');
}

body { 
  font-family: Circular; /*select font family normally*/
  font-weight: bold; /*select family's bold font face*/
}

或者让引擎通过font-synthesis：weight为我们生成(丑陋)粗体字体.

这是一个example,展示了googlefonts如何配置字体.

@font-face {
  font-family: 'Spectral SC';
  font-style: normal;
  font-weight: 400;
  src: local('Spectral SC Regular'),local('SpectralSC-Regular'),url(https://fonts.gstatic.com/s/spectralsc/v2/yJ95fCBFs0v33GTJdYTk_zUj_cnvWIuuBMVgbX098Mw.woff2) format('woff2');
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'Spectral SC';
  font-style: normal;
  font-weight: 700;  
  src: local('Spectral SC Bold'),local('SpectralSC-Bold'),url(https://fonts.gstatic.com/s/spectralsc/v2/J7mO0YbtyrIkp56FY15FDS_vZmeiCMNowNN9rHBYaTc.woff2) format('woff2');
  unicode-range: U+0400-045F,U+2116;
}