styled-components的createGlobalStyle中添加Google Font链接不生效排查

• @import语句位置错误
  CSS规范要求@import必须放在所有其他样式规则的最顶部才能生效，如果你在GlobalStyle中先写了通用样式重置、选择器样式等内容，再写@import语句，浏览器会直接忽略该导入规则。
  解决方法：将@import url('https://fonts.googleapis.com/css.....')移动到GlobalStyle中所有CSS代码的最开头位置。

• styled-components版本兼容问题
  v5之前的styled-components版本对createGlobalStyle中写@import的支持存在已知bug，会导致导入规则不被识别。
  解决方法：升级styled-components到最新稳定版，更推荐直接在项目入口html文件的<head>标签内加入谷歌字体对应的<link>引入标签，兼容性和加载性能都更好。

• 导入链接配置错误
  如果@import后的URL拼写错误，或者你没有在谷歌字体平台勾选对应需要的字体字重、样式，会导致请求返回的字体内容无效。
  解决方法：重新到谷歌字体官网选择需要的字体样式，复制生成的完整@import代码，不要手动修改路径参数。

• 网络/插件拦截请求
  部分广告拦截插件、网络防火墙会屏蔽谷歌字体域名的请求，导致字体加载失败。
  解决方法：打开浏览器控制台的网络面板，刷新页面后查看对应谷歌字体的请求状态，如果被拦截可以换用国内谷歌字体镜像源，或者将字体文件下载到本地后通过@font-face规则引入。

内容的提问来源于stack exchange，提问作者Shahriar Shafin