Webkit @ font-face渲染问题 - 某些元素不使用该字体
我正忙着在我的本地服务器上构建一个站点，而我正在使用Firefox来测试它。现在，它达到了里程碑，所以我必须检查它是否适用于每个浏览器。不幸的是，基于Webkit的浏览器似乎在某些地方渲染我的字体时遇到问题，即使它们的样式匹配也是如此。这是一张展示的图片：
看看该按钮如何加载Arial而不是段落的字体（Source Sans Pro）？更糟糕的是，填充物发生了什么？它应该看起来像这样（至少Firefox会像这样显示）：
现在，该段落和该按钮从父容器继承字体样式，并且不指定自己的样式。 Firefox正确显示它，但任何基于Webkit的浏览器都没有。控制台没有显示任何东西，我已经验证所有的字体文件都在加载。 （我提供两种格式：SVG和WOFF;后者总是在我测试的浏览器中加载 - 我也可以删除SVG。）
这是CSS @ font-face声明：
@font-face {
font-family: 'SourceSansPro';
src: url('@{sourceSansProFontPath}/woffRegular') format('woff'),
url('@{sourceSansProFontPath}/svgRegular#source_sans_proregular') format('svg');
font-weight: 400;
font-style: normal;
}
这是HTML块：
<div class="grid4 uniformFund">
<img class="blockImage" src="//www1-resources.aaa-kee.co.za.dev/png/funds/uniform-fund/logo.png" width="228" height="40" alt="The Uniform Fund - Logo">
<p>In South Africa, a uniform is required for attendance at most schools - without one a child may not be able to attend school.<br><br>As it is, thousands of children across the country do not have the privilege of having one at their disposal.</p>
<a class="readMoreButton" href="/fund/uniform-fund">Read more →</a>
</div>
为什么会发生这种情况？
更新
另外，我认为它与元素类型无关。在下面的示例中，您将看到Firefox正确加载了两个按钮，但Chrome没有（正确加载第一个按钮）。
更新 - 少量文件
以下是我的LESS文件：
1。 main.less
html {
background-color: #fff;
color: @paragraphColor;
cursor: default;
.paragraphFont;
height: 100%;
text-rendering: optimizeLegibility;
}
body {
border-top: 5px solid #2a2a2a;
}
a {
color: @baseColor;
text-decoration: none;
&[href]:hover {
text-decoration: underline;
}
}
a.commonButton, button.commonButton {
background-color: @baseColor;
border-radius: 4px;
border: 0;
color: #fff;
display: inline-block;
margin-bottom: 1px;
outline: 0;
padding: 11px 16px;
.transition(.1s background-color ease-out);
.boxShadow(0 1px 2px, fade(#000, 10%));
&:hover {
background-color: @lighterColor;
text-decoration: none;
}
&:hover:active {
background-color: @baseColor !important;
.boxShadow(inset 0 1px 2px, darken(@baseColor, 10%));
margin-top: 1px;
margin-bottom: 0;
}
}
.mouseDefault {
cursor: default;
}
header[role=siteNavigation] {
> div.backFade {
.gradientTopBottom(fade(desaturate(@baseColor, 30%), 17%), rgba(255,255,255,0));
display: none;
height: 800px;
position: absolute;
width: 100%;
z-index: 97;
}
.headerBlock {
margin: 27px auto;
blockquote.mainQuote {
color: #ff9e42;
font-size: 18px;
font-style: italic;
font-weight: 600;
line-height: 130%;
margin-top: 11px;
cite {
color: #d6d6d6;
}
}
.socialButtons {
padding: 20px 0 0 40px;
a {
background: #fff url("@{resPath}/png/social/buttonMap") no-repeat 0 0;
display: inline-block;
float: left;
margin: 0 2px;
height: 35px;
width: 35px;
text-indent: -9999px;
&.facebook {
background-position: 0 0;
&:hover {
background-position: 0 -35px;
}
}
&.googlePlus {
background-position: -35px 0;
&:hover {
background-position: -35px -35px;
}
}
&.twitter {
background-position: -70px 0;
&:hover {
background-position: -70px -35px;
}
}
&.rssFeeds {
background-position: -105px 0;
&:hover {
background-position: -105px -35px;
}
}
}
}
.siteLogo {
background: #fff url('@{resPath}/png/logo') no-repeat 0 0;
float: right;
height: 65px;
text-indent: -9999px;
width: 185px;
}
}
nav.siteMainMenu {
margin-bottom: 2px;
.line {
background-color: #f1f1f1;
height: 5px;
margin-top: 34px;
position: absolute;
width: 100%;
z-index: -1;
}
.menuPlaceHolder {
> ul > li {
background: #fff;
display: inline-block;
float: left;
overflow: hidden;
padding-right: 2px;
&:first-child {
padding-left: 2px
}
> div {
background-color: #fff;
border-radius: 0 5px 4px 4px;
border-top: 5px solid @baseColor;
display: none;
margin-top: -5px;
padding: 8px 0;
position: absolute;
z-index: 100;
.boxShadow(0 12px 15px; rgba(0,0,0,0.15));
ul {
display: inline-block;
float: left;
margin-left: -1px;
min-width: 200px;
&:first-child {
margin-left: 0;
}
li {
&.break {
border-bottom: 1px solid #eee;
height: 0px;
margin: 8px 0;
}
&.groupTitle {
border-bottom: 1px solid #eee;
color: #ccc;
font-size: 12px;
font-weight: 800;
margin-bottom: 8px;
padding: 14px 18px 8px;
text-transform: uppercase;
}
> a {
color: #808080;
display: block;
font-size: 12px;
font-weight: 600;
padding: 9px 19px;
text-transform: uppercase;
&[href]:hover, &.current {
background-color: #efefef;
.gradientTopBottom(#efefef, #f4f4f4);
.boxShadow(inset 0 1px 2px, #e4e4e4);
color: @baseColor;
text-decoration: none;
}
> span {
background-color: #ccc;
border-radius: 4px;
color: #777;
font-size: 11px;
font-weight: 600;
margin-left: 8px;
padding: 1px 5px 0;
&.new {
background-color: #ff9e42;
color: #fff;
font-weight: 900;
}
}
}
&.largeItem {
> a[href] {
color: #444;
font-size: 14px;
line-height: 1.3em;
max-width: 240px;
text-transform: none;
span.descriptor {
background: none;
display: block;
font-size: 12px;
font-weight: 400;
margin: 8px 0 0 0;
padding: 0;
}
&:hover {
color: @baseColor;
}
}
}
}
&.borderLeft {
border-left: 1px solid #eee;
}
&.borderRight {
border-right: 1px solid #eee;
}
}
}
> a {
border-bottom: 5px solid #e6e6e6;
color: #909090;
display: block;
font-size: 16px;
padding: 9px 18px;
position: relative;
text-transform: lowercase;
transition: .2s color ease-out;
}
&:hover > a[href],
> a[href]:hover,
> a.current {
.gradientTopBottom(#fff, lighten(@baseColor, 50%));
border-bottom: 5px solid #2e75b6;
color: @baseColor;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}
}
> ul > li.donate {
> a {
color: #b2923f;
font-weight: 400;
}
&:hover > a[href],
> a[href]:hover,
> a.current {
.gradientTopBottom(#fff, lighten(#7a5f07, 65%));
border-bottom: 5px solid #7a5f07;
color: #7a5f07;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}
> div {
border-top-color: #7a5f07;
}
}
> form#siteSearch {
border-bottom: 0;
display: inline-block;
float: right;
margin-top: 3px;
> input[type=text] {
border: 0;
display: inline-block;
float: left;
.inputFont;
line-height: 1em;
outline: 0;
padding: 5px 6px;
width: 140px;
margin: 0;
.transition(.4s width ease-out);
&:focus {
width: 193px;
}
}
> input[type=submit] {
background: #fff url("@{resPath}/png/search/submit") no-repeat 50% 50%;
border: 0;
cursor: pointer;
display: inline-block;
float: right;
margin: 0;
min-height: 27px;
min-width: 30px;
outline: 0;
padding: 6px;
&:hover {
background-color: #f1f1f1;
}
&:hover:active {
background-color: #e6e6e6;
background-position: 50% 60%;
.boxShadow(inset 0 1px 2px, #ccc);
}
}
}
}
}
}
main[role="documentContent"] {
#homeIntro {
padding: 30px 0;
background: @baseColor url("@{resPath}/png/elements/blue-pattern");
.boxShadow(inset 0 0 50px, @darkerColor);
.content p {
color: #fff;
font-size: 16px;
line-height: 1.4em;
}
.callToActionButtons {
> a.button {
background-color: #0061be;
color: #fff;
display: block;
font-size: 16px;
font-weight: 400;
margin-left: 10px;
padding: 14px 20px;
.transition(.2s background-color ease-out, .2s color ease-out);
&:first-child {
border-radius: 4px 4px 0 0;
}
&:last-child {
border-radius: 0 0 4px 4px;
}
&:hover {
background-color: #0056b2;
text-decoration: none;
}
&:hover:active {
.boxShadow(inset 0 1px 2px, fade(#000, 20%));
padding: 15px 20px 13px;
}
&.white {
background: #fff;
color: #0061be;
&:hover {
background: #b6e5ff;
}
}
}
}
}
#breadCrumbs {
background: #f7f7f7;
.gradientTopBottom(#f7f7f7, #fff);
color: #aaa;
padding: 20px 0 10px;
a[itemprop="url"] {
color: @lighterColor;
text-transform: uppercase;
font-size: 12px;
}
}
#pageContent {
margin: 40px auto;
.headerBlock {
margin-bottom: 30px;
.blockTitle {
background: #fff url("@{resPath}/png/elements/block-header-line") repeat-x 50% 50%;
h1 {
background-color: #fff;
display: inline-block;
font-size: 27px;
font-weight: 100;
padding: 0 20px 0 0;
}
}
}
.contentBlock {
line-height: 150%;
p {
margin-bottom: 14px;
&.introText {
font-size: 15px;
font-weight: 700;
}
}
ul.contentList, ol.contentList {
margin-left: 17px;
li {
padding: 0 0 10px 10px;
&:last-child {
padding-bottom: 0;
}
}
}
ul.contentList {
list-style-image: url("@{resPath}/png/elements/content-bullet");
}
h1, h2 {
color: @baseColor;
font-size: 17px;
margin: 27px 0 10px 0;
}
h1.pageTitle {
color: @baseColor;
font-size: 26px;
font-weight: 400;
padding: 0 0 30px;
margin: 0;
}
h2 {
font-size: 15px;
font-weight: 400;
}
img {
.userSelect(none);
&.blockImage {
display: block;
margin-bottom: 30px;
&.bordered {
border: 1px solid #ccc;
padding: 4px;
.boxShadow(0 1px 8px, #eee);
}
}
}
a {
&.readMoreButton {
border-radius: 2px;
border: 3px solid #ccc;
color: #484848;
display: inline-block;
margin: 10px 0 1px;
padding: 4px 16px;
text-transform: uppercase;
.transition(.2s background-color ease-out, .2s color ease-out);
.boxShadow(0 1px 2px, fade(#000, 10%));
&:hover {
background-color: #aaa;
border-color: #aaa;
color: #fff;
text-decoration: none;
}
&:hover:active {
.destroyBoxShadow();
margin: 11px 0 0;
}
}
}
.foodFund {
a.readMoreButton {
border-color: @foodFundColor;
&:hover {
background-color: @foodFundColor;
}
}
}
.activeEducationFund {
a.readMoreButton {
border-color: @activeEducationFundColor;
&:hover {
background-color: @activeEducationFundColor;
}
}
}
.uniformFund {
a.readMoreButton {
border-color: @uniformFundColor;
&:hover {
background-color: @uniformFundColor;
}
}
}
}
aside .asideBlock {
margin-bottom: 20px;
h1 {
background-color: @baseColor;
color: #fff;
font-size: 15px;
font-weight: 400;
padding: 7px 14px;
text-transform: uppercase;
}
a.donate {
border-radius: 4px;
border: 3px solid @baseColor;
color: @baseColor;
display: block;
font-size: 18px;
font-weight: 700;
padding: 10px 5px;
text-align: center;
.transition(.3s background-color ease-out, .3s color ease-out, .3s text-shadow ease-out);
&:hover {
background-color: lighten(@baseColor,10%);
color: #fff;
text-decoration: none;
text-shadow: 0 1px 2px darken(@baseColor, 2%);
}
&:hover:active {
.boxShadow(inset 0 1px 3px, darken(@baseColor, 2%));
padding: 11px 5px 9px;
text-shadow: 0 1px 1px darken(@baseColor, 2%);
}
}
ul {
list-style: none;
li a {
border-bottom: 1px solid #e6e6e6;
color: #444;
display: block;
padding: 5px 14px;
&:hover,
&.current {
background-color: #f1f1f1;
color: @baseColor;
text-decoration: none;
}
> span {
background-color: #ccc;
border-radius: 4px;
color: #777;
font-size: 11px;
font-weight: 600;
margin-left: 8px;
padding: 1px 5px 0;
text-transform: uppercase;
&.new {
background-color: #ff9e42;
color: #fff;
font-weight: 900;
}
}
}
}
}
}
#donatePartner {
font-size: 30px;
text-align: center;
padding: 40px 0;
border-top: 5px solid #eee;
&.e5c7b864a6ef {
border-top-color: #fdd00e;
a {
background: #fff url("@{resPath}/png/donate-partner/e5c7b864a6ef") no-repeat top center;
display: block;
height: 67px;
text-indent: -9999px;
}
}
}
#baseNavigation {
background: #2a2a2a url("@{resPath}/png/elements/dark-fabric");
margin-bottom: 1px;
padding: 40px 0;
div {
h1.blockTitle {
background: fade(#fff, 10%);
color: #fff;
font-weight: 400;
text-transform: uppercase;
padding: 8px 11px 7px;
margin-bottom: 2px;
}
a {
font-size: 13px;
color: #ccc;
span {
display: block;
&.image {
background: #2a2a2a url('@{resPath}/png/base-navigation/arrow') center center no-repeat;
display: block;
img {
.userSelect(none);
.transition(.3s opacity ease-out);
}
}
&.text {
display: block;
padding-top: 10px;
}
}
&:hover {
color: #fff;
text-decoration: none;
img {
opacity: 0.6;
}
}
}
}
}
}
footer[role="mainFooter"] {
#latestJournalEntry {
padding: 30px 0;
background: @baseColor url("@{resPath}/png/elements/blue-pattern");
&:hover .header h1 {
background-color: #fff;
}
.boxShadow(inset 0 0 50px, @darkerColor);
.header h1 {
border-radius: 4px;
background-color: fade(#fff, 70%);
padding: 16px 14px 13px;
color: @baseColor;
font-size: 15px;
font-weight: 200;
margin-right: 10px;
text-transform: uppercase;
.transition(.3s background-color ease-out);
span {
font-size: 38px;
font-weight: 800;
&.padder {
font-size: 16px;
font-weight: 200;
display: inline;
margin-left: 9px;
}
}
}
.content {
color: #fff;
h1 {
font-size: 24px;
font-weight: 200;
a {
color: #fff;
}
}
p {
color: lighten(@baseColor, 30%);
font-size: 14px;
font-weight: 400;
margin-top: 9px;
line-height: 1.4em;
&.credits {
border-top: 1px solid fade(#fff,15%);
color: lighten(@baseColor, 40%);
font-size: 11px;
padding-top: 5px;
font-weight: 400;
text-transform: uppercase;
a {
color: #fff;
}
}
}
}
}
#fatFooter {
background: #eee url("@{resPath}/png/elements/light-swirl");
padding: 30px 0;
margin: 1px 0;
h1.groupTitle {
color: @baseColor;
font-size: 16px;
font-weight: 400;
margin-bottom: 20px;
}
ul.links {
li {
font-size: 12px;
overflow: hidden;
a {
color: #4f4f4f;
display: block;
padding-bottom: 5px;
&:hover {
color: @baseColor;
}
}
}
}
.nextEvent {
a {
display: block;
line-height: 1.3em;
overflow: hidden;
span {
display: block;
&.date {
background-color: @baseColor;
border-radius: 4px 4px 0 0;
color: #fff;
font-weight: 200;
font-size: 22px;
padding: 10px;
.transition(.3s background-color ease-out; .3s color ease-out);
strong {
font-weight: 800;
}
}
&.eventName {
background-color: #fff;
border: 1px solid @baseColor;
border-radius: 0 0 4px 4px;
color: #444;
font-size: 14px;
font-weight: 400;
line-height: 1.7em;
padding: 5px 10px;
.transition(.3s color ease-out; .3s border-color ease-out);
span.eventType {
background-color: lighten(@baseColor, 50%);
border-radius: 0 10px 10px 0;
line-height: 1.7em;
margin-left: -10px;
margin-right: 5px;
margin-top: -10px;
color: @baseColor;
display: inline-block;
font-size: 10px;
padding: 0 6px 0 10px;
text-transform: uppercase;
}
}
}
&:hover{
text-decoration: none;
.transition(.3s box-shadow ease-out);
span.date {
background-color: @lighterColor;
}
span.eventName {
color: @baseColor;
border: 1px solid @lighterColor;
}
}
}
}
}
#baseFooter {
background: #2a2a2a url("@{resPath}/png/elements/dark-fabric");
font-size: 12px;
padding: 30px 0;
p.copyright {
color: #b9b9b9;
margin: 7px 0;
a {
color: #eee;
}
}
p.certification a {
color: #999;
}
a.foundryStamp {
background: #2a2a2a url("@{resPath}/png/foundry/footerStamp") no-repeat 0 0;
border-radius: 4px;
display: inline-block;
float: right;
height: 42px;
text-indent: -9999px;
width: 222px;
.transition(.8s background-position ease-out);
.boxShadow(inset 0 1px 4px, rgba(0,0,0,0.3));
&:hover {
background-position: 0 -42px;
}
}
}
}
2。 gather.less（此文件包含字体分配定义）
@resPath: "//www1-resources.aaa-kee.co.za.dev";
@sliderSkinPath: "@{resPath}/png/slider/skins";
@sliderSlidesPath: "@{resPath}/png/slider/slides";
@baseColor: #1f74c2;
@lighterColor: #448ddf;
@darkerColor: #005ba7;
@paragraphColor: #6e6e6e;
@foodFundColor: #98d733;
@activeEducationFundColor: #ff00af;
@uniformFundColor: #24adcd;
.font (@size, @lineHeight) {
font: ~"@{size}/@{lineHeight}" "SourceSansPro", Helvetica, Arial, Sans-Serif;
}
.paragraphFont () {
.font(14px, 150%);
}
.inputFont () {
.font(14px, 100%);
}
.boxShadow (@style, @c) {
-moz-box-shadow: @style @c;
-ms-box-shadow: @style @c;
-webkit-box-shadow: @style @c;
box-shadow: @style @c;
}
.boxShadowDouble (@style, @c, @style2, @c2) {
-moz-box-shadow: @style @c, @style2 @c2;
-ms-box-shadow: @style @c, @style2 @c2;
-webkit-box-shadow: @style @c, @style2 @c2;
box-shadow: @style @c, @style2 @c2;
}
.destroyBoxShadow () {
-moz-box-shadow: none;
-ms-box-shadow: none;
-ms-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.transition (@value1,@value2:X,...)
{
@value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-moz-transition: @value;
-ms-transition: @value;
-o-transition: @value;
-webkit-transition: @value;
transition: @value;
}
.animation (@name; @speed: .5s) {
-moz-animation-duration: @speed;
-moz-animation-name: @name;
-ms-animation-name: @name;
-ms-animation-duration: @speed;
-o-animation-duration: @speed;
-o-animation-name: @name;
-webkit-animation-duration: @speed;
-webkit-animation-name: @name;
animation-duration: @speed;
animation-name: @name;
}
.gradientTopBottom (@top; @bottom) {
background-color: @bottom;
background: -moz-linear-gradient(top, @top 0%, @bottom 100%);
background: -ms-linear-gradient(top, @top 0%, @bottom 100%);
background: -o-linear-gradient(top, @top 0%, @bottom 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @top), color-stop(100%, @bottom));
background: -webkit-linear-gradient(top, @top 0%, @bottom 100%);
background: linear-gradient(to bottom, @top 0%, @bottom 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{top}', endColorstr='@{bottom}',GradientType=0 );
}
.gradientRadial (@in; @out) {
background: -moz-radial-gradient(center, ellipse cover, @in 0%, @out 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%, @out));
background: -webkit-radial-gradient(center, ellipse cover, @in 0%, @out 100%);
background: -o-radial-gradient(center, ellipse cover, @in 0%, @out 100%);
background: -ms-radial-gradient(center, ellipse cover, @in 0%, @out 100%);
background: radial-gradient(ellipse at center, @in 0%, @out 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{in}', endColorstr='@{out}',GradientType=1 );
}
.userSelect (@value: none) {
-moz-user-select: @value;
-webkit-user-select: @value;
user-select: @value;
}
@import "reset.less";
@import "grid.less";
@import "slider/main.less";
@import "slider/skins/white.less";
@import "slider/slides/active-education.less";
@import "slider/slides/excursion-fund.less";
@import "slider/slides/food-fund.less";
@import "fonts/source-sans-pro.less";
@import "main.less";
3。 @ font-face definitions
@sourceSansProFontPath: "@{resPath}/fonts/source-sans-pro";
@font-face {
font-family: 'SourceSansPro';
src: url('@{sourceSansProFontPath}/woffBlackItalic') format('woff'),
url('@{sourceSansProFontPath}/svgBlackItalic#source_sans_problack_italic') format('svg');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'SourceSansPro';
src: url('@{sourceSansProFontPath}/woffBlack') format('woff'),
url('@{sourceSansProFontPath}/svgBlack#source_sans_problack') format('svg');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'SourceSansPro';
src: url('@{sourceSansProFontPath}/woffBoldItalic') format('woff'),
url('@{sourceSansProFontPath}/svgBoldItalic#source_sans_probold_italic') format('svg');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'SourceSansPro';
src: url('@{sourceSansProFontPath}/woffBold') format('woff'),
url('@{sourceSansProFontPath}/svgBold#source_sans_probold') format('svg');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'SourceSansPro';
src: url('@{sourceSansProFontPath}/woffExtraLightItalic') format('woff'),
url('@{sourceSansProFontPath}/svgExtraLightItalic#source_sans_proXLtIt') format('svg');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'SourceSansPro';
src: url('@{sourceSansProFontPath}/woffExtraLight') format('woff'),
url('@{sourceSansProFontPath}/svgExtraLight#source_sans_proextralight') format('svg');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'SourceSansPro';
src: url('@{sourceSansProFontPath}/woffItalic') format('woff'),
url('@{sourceSansProFontPath}/svgItalic#source_sans_proitalic') format('svg');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'SourceSansPro';
src: url('@{sourceSansProFontPath}/woffLightItalic') format('woff'),
url('@{sourceSansProFontPath}/svgLightItalic#source_sans_prolight_italic') format('svg');
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: 'SourceSansPro';
src: url('@{sourceSansProFontPath}/woffLight') format('woff'),
url('@{sourceSansProFontPath}/svgLight#source_sans_prolight') format('svg');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'SourceSansPro';
src: url('@{sourceSansProFontPath}/woffRegular') format('woff'),
url('@{sourceSansProFontPath}/svgRegular#source_sans_proregular') format('svg');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'SourceSansPro';
src: url('@{sourceSansProFontPath}/woffSemiboldItalic') format('woff'),
url('@{sourceSansProFontPath}/svgSemiboldItalic#source_sans_proSBdIt') format('svg');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'SourceSansPro';
src: url('@{sourceSansProFontPath}/woffSemibold') format('woff'),
url('@{sourceSansProFontPath}/svgSemibold#source_sans_prosemibold') format('svg');
font-weight: 600;
font-style: normal;
}
1 个答案:
答案 0 :(得分：0)
找到解决方案：
当设置text-rendering: optimizeLegibility;时，似乎存在Webkit错误。当我禁用它时，一切正常。
现在，这提出了一个问题 - 它为什么这样做？真的是一个错误吗？对我来说，它是。仅仅因为在某些元素上显示字体的性质，而不是其他元素。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？