Amphtml: Validation error when linking fontawesome v4 shim

Created on 17 Apr 2020 · 10Comments · Source: ampproject/amphtml

Please only file reports about bugs in AMP here.

If you have questions about how to use AMP or other general questions about AMP please ask them on Stack Overflow under the AMP HTML tag instead of filing an issue here: http://stackoverflow.com/questions/tagged/amp-html
If you have questions/issues related to Google Search please ask them in Google's AMP forum instead of filing an issue here: https://goo.gl/utQ1KZ

If you have a bug for AMP please fill in the following template. Delete everything except the headers (including this text).

What's the issue?

Briefly describe the bug.

How do we reproduce the issue?

Please provide a public URL and ideally a reduced test case (e.g. on jsbin.com) that exhibits only your issue and nothing else. Provide step-by-step instructions for reproducing the issue:

Step 1 to reproduce
Step 2 to reproduce
…

What browsers are affected?

All browsers? Some specific browser? What device type?

Which AMP version is affected?

Is this a new issue? Or was it always broken? Paste the version of AMP where you saw this issue. (You can find the version printed in your browser's console.)

Bug caching

Source

hukaicheng

Most helpful comment

I plan to make this component [0-9a-zA-Z-]+.css unless anyone has a different idea.

Gregable on 21 Apr 2020

👍2

All 10 comments

Hi @hukaicheng thanks for filing, can you please provide more specificity to the issue?

caroqliu on 20 Apr 2020

您好@hukaicheng感谢您提交，您能否提供更多关于此问题的信息？

企业微信截图_15874324298763
添加这个fontawesome链接https://use.fontawesome.com/releases/v5.11.2/css/v4-shims.css，AMP检测报错，AMP官网是支持https://use.fontawesome.com这个域名的，为什么会报错呢？

hukaicheng on 21 Apr 2020

Thanks for the screenshot. My understanding, which I've been able to reproduce, is that the given href https://use.fontawesome.com/releases/v5.11.1/css/v4-shims.css produces an error in the validator. amp.dev suggests that we can add custom fonts from fontawesome, and fontawesome provides this specific asset as a viable usage:

<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css">
</head>

@ampproject/wg-caching It appears the first <link> above passes in the AMP validator but the second does not.

caroqliu on 21 Apr 2020

感谢您的截图。我能够重现的理解是，给定的href https://use.fontawesome.com/releases/v5.11.1/css/v4-shims.css会在验证器中产生错误。amp.dev建议我们可以从fontawesome 添加自定义字体，并且fontawesome 提供了此特定资产作为可行用法：
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css">
</head>
@ ampproject / wg-caching<link>在AMP验证器中出现上述第一遍，但第二遍没有。

fomtawesomr
谢谢您的耐心回答，抱歉，之前上传错一张图，您的意思是现在AMP不支持‘’的引入吗？ AMP官网是支持”Font Awesome: https://maxcdn.bootstrapcdn.com, https://use.fontawesome.com“这两个域名的，如图我也是按照all.css 和 v4-shims.css引入,并且通过“#development=1”验证也是同样的错误，麻烦您添加v4-shims.css尝试一下

hukaicheng on 21 Apr 2020

The specific regular expression for fontawesome stylesheets requires the last component to be (all|brands|solid|regular|light|fontawesome).css. My memory is that @cramforce designed this matching rule, so I defer to him on how/if we should update it.

Gregable on 21 Apr 2020

I don't have specific recollection. Making this broader is probably fine.

cramforce on 21 Apr 2020

I plan to make this component [0-9a-zA-Z-]+.css unless anyone has a different idea.

Gregable on 21 Apr 2020

👍2

[0-9a-zA-Z-]+.css除非有人有不同的想法，否则我打算制作此组件。
谢谢您的解答，我希望能够快点兼容“ use.fontawesome.com/releases/v5.13.0/css/v4-shims.css”，因为我非常着急的去使用他，因为图标不显示会影响到我们客户的体验效果，谢谢您，希望可以快点完善并通知到我，谢谢~

hukaicheng on 22 Apr 2020

This fix will be in the next validator push.

Gregable on 23 Apr 2020