Question

我已经添加了＆＃39;循环＆＃39;我的网站的字体系列显示在下面的第一个代码段中，但它没有添加任何粗体，所以我尝试将粗体.ttf和.woff包含在粗体＆＃39;圆形＆＃39;字体，但我的两种方法都不起作用，第一种方法使所有文本都变粗，第二种方法根本没有做任何事情！

以下是我添加＆＃39;循环＆＃39;到我的asp.net mvc网站的site.css文件，它使所有文本循环，但不是粗体

＆＃13;

@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;
}

＆＃13;

在这里，我尝试添加粗体，但它使一切都变得粗体

＆＃13;

@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,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px !important;
    -webkit-font-smoothing: antialiased !important;
    color: #484848 !important;
}

＆＃13;

我尝试的最后一件事是添加一个新的＆＃39; font-face＆＃39;并将它包含在体内，但它并没有改变我的任何字体 - 重量：粗体＆＃39; css加粗

＆＃13;

@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,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px !important;
    -webkit-font-smoothing: antialiased !important;
    color: #484848 !important;
}

＆＃13;

Answer 1

@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为我们生成（丑陋的）粗体字体。

这是一个显示googlefonts如何配置字体的example。

@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+0490-0491, U+04B0-04B1, U+2116;
}

Answer 2

下面的代码将起作用

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

body { 
  font-family: Circular;
  font-weight: bold;
}

包括粗体不起作用的字体表面

2 个答案: