包括粗体字体不工作

问题描述：

我已将“circular”字体系列添加到了我的网站，如下面的第一个代码片段所示，但它没有添加任何粗体，所以我尝试将粗体.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,"Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    font-size: 16px !important; 
 
    -webkit-font-smoothing: antialiased !important; 
 
    color: #484848 !important; 
 
}

我想的最后一件事是添加了新的“字体面”，并把它放置在身体像这一点，但它不会改变任何我的“字体重量：大胆” 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,"Helvetica Neue",Helvetica,Arial,sans-serif; 
 
    font-size: 16px !important; 
 
    -webkit-font-smoothing: antialiased !important; 
 
    color: #484848 !important; 
 
}

能否请您精确显示您是如何尝试使用的字体在HTML代码？ – ecg8

答

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

答

下面code'll工作

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

他也不需要粗体字体 –

包括粗体字体不工作

相关推荐