时间戳

首页 > 解决方案 > https://www.google.com/amp/s/siachenstudios.com/ 提供的 amp 页面中未显示图标

wordpress - https://www.google.com/amp/s/siachenstudios.com/ 提供的 amp 页面中未显示图标

问题描述

当 amp 页面由 google amp CDN 提供时图标未显示，即 - https://www.google.com/amp/s/siachenstudios.com/yg-drops-new-protest-track-ftp/%3famp

但是，如果我的域为 amp 页面提供服务，图标可以正常工作 - https://siachenstudios.com/yg-drops-new-protest-track-ftp/?amp

如何修复 google amp 缓存域上的图标？

标签： wordpressfont-awesomeamp-htmldashicons

解决方案

我检查了这两个站点并观察到从谷歌缓存字体系列加载的 AMP 站点时 - mobile-theme.ttf 失败并出现 404。

从缓存加载时，字体系列 src url 明显变化

从缓存加载时的 AMP 页面字体系列 -

@font-face{font-family:"mobile-theme";
src:url('https://siachenstudios-com.cdn.ampproject.org/r/s/siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.eot?9');
src:url('https://siachenstudios-com.cdn.ampproject.org/r/s/siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.eot?9#iefix') format("embedded-opentype"),
url('https://siachenstudios-com.cdn.ampproject.org/r/s/siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.woff?9') format("woff"),
url('https://siachenstudios-com.cdn.ampproject.org/r/s/siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.ttf?9') format("truetype"),
url('https://siachenstudios-com.cdn.ampproject.org/r/s/siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.svg?9#mobile-theme') format("svg");
font-weight:normal;
font-style:normal
}

返回 404。

从没有缓存的 url 加载时的 AMP 页面字体系列 -

@font-face{
font-family:"mobile-theme";src:url("https://siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.eot?9");
src:url("https://siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.eot?9#iefix") format("embedded-opentype"),
url("https://siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.woff?9") format("woff"),
url("https://siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.ttf?9") format("truetype"),
url("https://siachenstudios.com/wp-content/plugins/td-composer/mobile/images/icons/mobile-theme.svg?9#mobile-theme") format("svg");font-weight:normal;
font-style:normal
}

我建议您是否使用 AMP 建议的字体以外的本地字体。

AMP 建议的字体系列 - https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/custom_fonts/

您应该使用 amp-font 组件来添加其他字体。参考 - https://amp.dev/documentation/examples/components/amp-font/

推荐阅读