我在下面的第一个代码片段中添加了’圆形’字体系列到我的网站,但它没有添加任何粗体,所以我尝试将粗体.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;
}
