Question

我用字体将字体从档案中连接起来。

@font-face {
    font-family: "Mak";
    src: url( ../fonts/MAK.eot ) format( embedded-opentype ),
        url( ../fonts/MAK.woff ) format( woff ),
        url( ../fonts/MAK-bold.eot ) format( embedded-opentype ),
        url( ../fonts/MAK-bold.woff ) format( woff ),
  }

我试图将其上载到gui和其他托管服务上,但它的确没有帮助。

Answer 1

字体档案肯定能够改善所评论的负荷时间。

However, always double-check your @font-face rule.
Currently, it has some syntax errors.

replace the final comma with a semicolon – the trailing comma actually invalidates the url property.
you need 2 font-face rules for regular and the bold font-weight. Otherwise, the browser will render bold text in "faux bold" – the same applies to italic styles.

我们可以安全地删除(停靠的因特网探索者使用的)被折旧的“条形”栏目——同样适用于也译出的“条形”。

CSS@font-face 规则应当如此。

/* Regular – font-weight: normal/400 */
@font-face {
  font-family: "Mak";
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/MAK.woff") format("woff");
}

/* Italic – font-weight: normal/400; font-style:italic – if available */
@font-face {
  font-family: "Mak";
  font-weight: 400;
  font-style: italic;
  src: url("../fonts/MAK-italic.woff") format("woff");
}

/* Bold – font-weight: bold/700*/
@font-face {
  font-family: "Mak";
  font-weight: bold;
  font-style: normal;
  src: url("../fonts/MAK-bold.woff") format("woff");
}

/* Bold italic – font-weight: bold/700; font-style:italic – if available*/
@font-face {
  font-family: "Mak";
  font-weight: bold;
  font-style: italic;
  src: url("../fonts/MAK-bold-italic.woff") format("woff");
}

Some browsers may be more forgiving - allowing minor syntax errors.
Usually, even minor mistakes disable the @font-face rules completely.

Common pitfalls

1. Wrong font file paths/URLs:

font makes on desktop but not on Mobile Tool

Double check your paths and check your page via DevTools.
If you can t see an entry in the network tab (filtered by fonts) – you probably see this font rendered on desktop but not on mobile just because you ve installed it locally for design/prototyping/mockup purposes.

2. Invalid `@font-face` rules

正如前面提到的那样,大多数浏览器令人感到非常不安。这里有一些常见错误:

2.1. Wrong format identifier
In fact most modern browsers don t necessarily need these so might ditch them completely ... with regards to backwards compatibility still a good idea to include them.

Notworking

@font-face {
  font-family: "Mak";
  font-weight: bold;
  font-style: italic;
  src: url("../fonts/MAK-bold-italic.ttf") format("ttf");
}

正确的识别符号是format(“truetype”)。

@font-face {
  font-family: "Mak";
  font-weight: bold;
  font-style: italic;
  src: url("../fonts/MAK-bold-italic.ttf") format("truetype");
}

Similarly the correct identifier for ".otf" files would be format("opentype")
Fortunately both use-cases are quite irrelevant as we should prefer the perfectly supported newer .woff2 or .woff formats anyway as they provide a more advanced file compression.

2.2. Errors in src property
If you modify the src property s url array make sure you close this property value correctly

Not Correct - Lineing comma at the end of the property

@font-face {
  font-family: "Mak";
  font-weight: bold;
  font-style: italic;
  src: url("../fonts/MAK-bold-italic.woff2") format("woff2"),
       url("../fonts/MAK-bold-italic.woff") format("woff"),
}

Correct - 改为半雷

@font-face {
  font-family: "Mak";
  font-weight: bold;
  font-style: italic;
  src: url("../fonts/MAK-bold-italic.woff2") format("woff2"),
       url("../fonts/MAK-bold-italic.woff") format("woff");
}

3. Corrupted font-files

所幸的是,browser devTools回去了像OTS parsing出的错误<>。可能的原因:


if you re using bundlers like webpack your font file might have been copied in an inappropriate transfer mode. See also this SO post "WebPack custom font loading resulted OTS PARSING ERROR: invalid sfntVersion:".
You may experience similar issues when working with CMS font uploads – in this case file a bug report. A server side script may transfer or convert the font file resulting in an invalid font file.
The font might be of questionable quality – some free fonts may not meat the standards required by browsers to parse a font (e.g missing important data records)

您还可以检查一下:woff2中是否有亲人,因为这一格式也紧凑了车轮装载。

Common pitfalls

1. Wrong font file paths/URLs:

2. Invalid @font-face rules

3. Corrupted font-files

友情链接

2. Invalid `@font-face` rules