时间戳

首页 > 解决方案 > Webfont 无法在移动设备上运行，即使有多种格式

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

问题描述

我从 MyFonts (Kokomo Breeze Regular) 购买了一个网络字体，它在桌面上运行良好，但不会出现在移动设备上。

我已经使用@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/

谢谢！

标签： webfonts

解决方案

你好，玛丽。欢迎来到堆栈溢出。

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

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

此字体文件的链接必须与调用它的 css 脚本相关。如果您使用的是内部 css（看起来可能是这样），那么您应该使字体 url 相对于调用它的 html 脚本：

来自 Mary 网站的字体位置图片

所以你的链接会是这样的/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');}

这应该为每个字体文件重复，即kokomo-breeze-regular、kokomo-breeze-bold、kokomo-breeze-condensed等

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

-Parapluie

推荐阅读