标签: google-font-api
如何保持CSS不被渲染阻止我的网站？
我正在尝试优化我的移动网页的加载速度,为此我正在使用该网站:
这个网站评估我的来源并告诉我我可以改进什么.在我的网站上我下载了一个字体:
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
并且显然这阻止了我的页面的渲染.现在,如果这是JavaScript我可以使用async标签中的单词,它将解决问题,但这不是我正在加载的javascript文件!
反正有没有阻止我的浏览器阻止我的浏览器,并迫使它等待下载？
推荐指数
解决办法
查看次数
导入并使用google webfont
对于一个项目,我必须使用许多样式的字体.这是谷歌字体的链接
这是我的css导入
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);
我想知道的是如何定义要显示的字体系列,例如"Open Sans Light 300 Italic"
谢谢
推荐指数
解决办法
查看次数
使用@import for google字体无法在Internet Explorer上运行
嘿家伙,我正在尝试在我的网络上使用谷歌字体,但我有一个问题与Internet Explorer.我正在使用@import,当我谷歌时,我发现人们会这样使用它:
@import url('http://fonts.googleapis.com/css?family=Open+Sans');
问题是我得到的链接看起来像这样:
@import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
当我在IE上打开我的网页时根本没有文字.
我必须得到webfont文件？或者有办法解决这个问题吗？
推荐指数
解决办法
查看次数
Google Font API使用浏览器检测功能.如何获取font-face的所有字体变体
我刚刚发现Google Font API使用浏览器检测
这意味着当您打开http://fonts.googleapis.com/css?family=Racing+Sans+One时,它将仅显示您当前浏览器所需的内容
所以我不能只是抓住它并使用我自己的font-face,如果我想让它在所有浏览器中工作.许多人这样做,不知道它会无处不在
获取字体的所有变体的方法是什么？woff2/WOFF/TTF /等？(用作font-face中的后备)
我刚尝试在Chrome中打开api页面,在Developer中更改浏览器useragent欺骗,并完成各种变化.我看到至少4个
woff2/woff/ttf是否足够,或者我需要多少个版本才能安全？我也需要EOT/SVG版本吗？
推荐指数
解决办法
查看次数
Google字体提供:请求的资源上没有"Access-Control-Allow-Origin"标头
我正在尝试使用谷歌字体'Oswald'.当我以推荐的方式将其嵌入我的页面时:
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
Chrome会引发以下错误:
XMLHttpRequest cannot load http://fonts.googleapis.com/css?family=Oswald:400,300,700. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://<<redacted>>' is therefore not allowed access.
这只是谷歌的一个错误,还是我做错了什么？
推荐指数
解决办法
查看次数
谷歌字体渲染时的奇怪问题
所以我这样使用字体
<link href='http://fonts.googleapis.com/css?family=Fira+Sans:700|Open+Sans&text=1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%20' rel='stylesheet' type='text/css' />
<style>h1, h2, h3 {font-family: 'Fira Sans', sans-serif; line-height:1.125em} </style>
这是结果......
我完全感到困惑,甚至会发生这种情况？我究竟做错了什么.问题似乎只在家用电脑上.到处休息我检查了它的罚款.
家用电脑:Firefox,Windows 7(在Chrome中字体根本不显示,其空白)
推荐指数
解决办法
查看次数
如何通过 CSS 从 CDN 使用 Google Noto Color Emoji front
我有什么办法可以从 CDN使用Google 的彩色表情符号字体吗？我试图在 jsfiddle 中使用它，但不知道如何使用。
推荐指数
解决办法
查看次数
'ASAP'和'UBUNTU'谷歌字体突然变形
过去几年我们一直在Web应用程序中使用ASAP字体而没有任何问题.突然间,我们开始使用'ASAP'谷歌字体注意畸形.它们仅在使用字体呈现<16px字体大小时发生."Ubuntu"字体也出现了同样的问题.
有谁知道造成这些问题的原因是什么？
我们已经注意到这些问题:操作系统的Win10,MacOS上的IE11,最新的Chrome,Edge,Firefox,Safari.
推荐指数
解决办法
查看次数
Gatsby.js:在没有渲染阻止的情况下为版式主题加载Google字体
我正在使用Gatsby.js及其带有Irving主题的Typography插件.
此主题需要Google字体"Exo"和"Yrsa",并<head>在导出的静态html文件部分添加导入:
<link href="//fonts.googleapis.com/css?family=Exo:700|Yrsa:400,700" rel="stylesheet" type="text/css"/>
此导入是渲染阻止内容,如果可能,我会更愿意避免使用这些内容和Google PageSpeed Insights分数.
我尝试使用gatsby-plugin-google-fonts并将以下内容添加到我的gatsby-config.js中:
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [
`Exo\:700`,
`Yrsa\:400,700`,
],
}
},
然而,这只是添加了第二个导入调用.我应该将它们放在静态目录中吗？即使这样,我如何配置Typography仍然使用这些字体而不单独导入它们？
typography google-font-api google-pagespeed gatsby render-blocking
推荐指数
解决办法
查看次数
错误：设置时“请注意，未显式设置 'style-src-elem'”
和这个人有同样的问题，但我没有使用 .NET，所以我不知道这个问题的答案是什么。我正在使用电子。
<head>
<meta http-equiv="Content-Security-Policy" content="style-src-elem 'self' https://fonts.googleapis.com">
<meta http-equiv="Content-Security-Policy" content="font-src https://fonts.gstatic.com">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="index.css">
</head>
这是错误：
Refused to load the stylesheet 'https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
问题就在这里，'style-src-elem'IS明确规定了。我不知道发生了什么事。请帮忙
推荐指数
解决办法
查看次数
标签 统计
google-font-api ×10
css ×6
fonts ×6
html ×2
css3 ×1
electron ×1
font-face ×1
gatsby ×1
google-fonts ×1
javascript ×1
jsfiddle ×1
render ×1
typography ×1
webfonts ×1