我尝试在 LESS 中包含网络字体。部分完成工作的参数混合如下:
.fontface(@fontName, @fontFile) {
@font-face {
font-family: @fontName;
src: url("@{fontFile}.eot");
src: url("@{fontFile}.eot?#iefix") format('embedded-opentype'),
url("@{fontFile}.woff") format('woff'),
url("@{fontFile}.ttf") format('truetype'),
url("@{fontFile}.svg#DistantGalaxyRegular") format('svg');
font-weight: normal;
font-style: normal; } }
.font(@fontsize:10pt, @fontName:"Aierbazzi", @fontFile:"Aierbazzi-fontfacekit/aierbazzi-webfont") {
.fontface(@fontName, @fontFile);
font-family:@fontName;
font-size:@fontsize; }
第一次调用它工作正常:
.font1 { .font(24pt, "Black-Rose","Black-Rose-fontfacekit/BLACKR-webfont"); }
.font4 { .font(24pt, "bubblegum-sans","bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont"); }
结果是:
.font1 {
font-family:"Black-Rose";
font-size:24pt; }
@font-face {
font-family:"Black-Rose";
src:url("Black-Rose-fontfacekit/BLACKR-webfont.eot");
src:url("Black-Rose-fontfacekit/BLACKR-webfont.eot?#iefix") format('embedded-opentype'),url("Black-Rose-fontfacekit/BLACKR-webfont.woff") format('woff'),url("Black-Rose-fontfacekit/BLACKR-webfont.ttf") format('truetype'),url("Black-Rose-fontfacekit/BLACKR-webfont.svg#DistantGalaxyRegular") format('svg');
font-weight:normal;
font-style:normal; }
.font4 {
font-family:"bubblegum-sans";
font-size:24pt; }
@font-face {
font-family:"Black-Rose";
src:url("Black-Rose-fontfacekit/BLACKR-webfont.eot");
src:url("Black-Rose-fontfacekit/BLACKR-webfont.eot?#iefix") format('embedded-opentype'),url("Black-Rose-fontfacekit/BLACKR-webfont.woff") format('woff'),url("Black-Rose-fontfacekit/BLACKR-webfont.ttf") format('truetype'),url("Black-Rose-fontfacekit/BLACKR-webfont.svg#DistantGalaxyRegular") format('svg');
font-weight:normal;
font-style:normal; }
当我交换两行时:
.font4 { .font(24pt, "bubblegum-sans","bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont"); }
.font1 { .font(24pt, "Black-Rose","Black-Rose-fontfacekit/BLACKR-webfont"); }
再次在 CSS 中注册了第一个网络字体:
.font4 {
font-family:"bubblegum-sans";
font-size:24pt; }
@font-face {
font-family:"bubblegum-sans";
src:url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.eot");
src:url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.eot?#iefix") format('embedded-opentype'),url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.woff") format('woff'),url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.ttf") format('truetype'),url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.svg#DistantGalaxyRegular") format('svg');
font-weight:normal;
font-style:normal;}
.font1 {
font-family:"Black-Rose";
font-size:24pt; }
@font-face {
font-family:"bubblegum-sans";
src:url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.eot");
src:url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.eot?#iefix") format('embedded-opentype'),url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.woff") format('woff'),url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.ttf") format('truetype'),url("bubblegum-sans-fontfacekit/BubblegumSans-Regular-webfont.svg#DistantGalaxyRegular") format('svg');
font-weight:normal;
font-style:normal; }
可能是什么原因?我此刻一无所知。非常感谢您提前。