Webfont无法在移动设备上运行，即使使用多种格式

Question

我从MyFonts（Kokomo Breeze Regular）那里购买了一种Webfont，它在台式机上可以正常工作，但在移动设备上无法显示。

我已经使用@ font-face添加了所​​有不同的文件格式，但在移动设备上仍然无法使用：

@font-face { 
    font-family: "Kokomo Breeze"; 
    src: url({{ 'kokomo-breeze.eot' | asset_url }});
    src: url({{ 'kokomo-breeze.eot?#iefix' | asset_url }}) format('embedded-opentype'),
    url({{ 'kokomo-breeze.woff2' | asset_url }}) format('woff2'),
    url({{ 'kokomo-breeze.woff' | asset_url }}) format('woff'),
    url({{ 'kokomo-breeze.ttf' | asset_url }}) format('truetype'),
    url({{ 'kokomo-breeze.svg#kokomo-breeze' | asset_url }}) format('svg');
}

我还尝试将其添加到样式表的顶部，如MyFonts说明中所述：

/**
 * @license
 * MyFonts Webfont Build ID 3780250, 2019-07-01T14:26:51-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: KokomoBreeze-Regular by Nicky Laatz 
 * URL: https://www.myfonts.com/fonts/nicky-laatz/kokomo-breeze/regular/
 * Copyright: Nicky Laatz
 * Licensed pageviews: 100,000
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3780250
 * 
 * © 2019 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/39ae9a");

这是我正在工作的网站：https://www.persuasion-nation.com/

谢谢！

Answer 1

你好，玛丽。欢迎使用Stack Overflow。

我相信问题可能出在您与字体文件的链接上。我以前从未看过您使用的语法：src: url({{ 'kokomo-breeze.eot' | asset_url }});

需要一个清晰的字体文件链接，例如：src: url('webfonts/32457D_0_0.eot');

指向字体文件的链接必须相对于调用它的css脚本。如果您使用的是内部CSS（看起来可能是这样），则应将字体URL相对于调用它的html脚本：

因此您的链接将类似于/Fonts/thefontname.woff2

对于一个完整而有效的示例，我在下面粘贴了一个当前有效的脚本。

还请注意：添加许可脚本绝对可以按照您说的做。

/**
 * @license
 * MyFonts Webfont Build ID 3237525, 2017-02-14T14:25:07-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: RockwellStd-BoldCondensed by Monotype 
 * URL: http://www.myfonts.com/fonts/mti/rockwell/std-bold-condensed/
 * Copyright: Copyright 1990, 2002 Adobe Systems Incorporated. All Rights Reserved. Copyright 1990, 2002 The Monotype Corporation. All rights reserved.
 * Licensed pageviews: 250,000
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=3237525
 * 
 * © 2017 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/32457d");

@font-face {font-family: 'RockwellStd-BoldCondensed';
  src: url('webfonts/32457D_0_0.eot');
  src: url('webfonts/32457D_0_0.eot?#iefix') format('embedded-opentype'),
       url('webfonts/32457D_0_0.woff2') format('woff2'),
       url('webfonts/32457D_0_0.woff') format('woff'),
       url('webfonts/32457D_0_0.ttf') format('truetype');}

应该对每个字体文件重复此操作，例如，普通的科科莫微风，粗体的科科莫微风，压缩的科科莫微风等，等等。

希望这可以帮助您。在评论中提出任何需要的问题。

-Parapluie