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

概述我在下面的第一个代码片段中添加了’圆形’字体系列到我的网站,但它没有添加任何粗体,所以我尝试将粗体.ttf和.woff包含为粗体’圆形’字体但是我的两种方法都不起作用,第一种方法使所有文本都变粗,第二种方法根本没有做任何事情！ 这是我如何在我的asp.net mvc网站的site.css文件中添加’循环’,它使所有文本循环,但不是粗体 @font-face { font-family: ' 我在下面的第一个代码片段中添加了’圆形’字体系列到我的网站,但它没有添加任何粗体,所以我尝试将粗体.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;}

总结

以上是内存溢出为你收集整理的html – 包括粗体不起作用的字体全部内容，希望文章能够帮你解决html – 包括粗体不起作用的字体所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。