CSS Google Fonts 字体无法加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17712027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Fonts Font Doesn't load
提问by dunnmifflsys
I'm trying to add PT Sans into a newsletter, but for some reason it isn't loading I've copied almost all of the code, but it isn't working. I would be so grateful for anyone who can help.
我正在尝试将 PT Sans 添加到时事通讯中，但由于某种原因它没有加载我几乎复制了所有代码，但它不起作用。我将非常感谢任何可以提供帮助的人。
Here is the CSS code:
这是CSS代码：
h1, h2, h3 {
font-family: 'PT Sans', sans-serif;
}
and the HTML code:
和 HTML 代码：
<link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
EDIT: Here's the rest of the CSS:
编辑：这是 CSS 的其余部分：
h1, h2, h3 {
font-family: 'PT Sans', sans-serif;
}
#logo{width:810px}
#saveDateText{
position:relative;
top:30px;
left:80px;
font-size:50px;
color:rgb(228,242,214)
}
#october{
position:relative;
top:0px;
left:90px;
font-size:35px;
color:rgb(228,242,214)
}
#raftLogo{
position:relative;
top:-125px;
left:550px;
}
#saveTheDate {
background-color:rgb(123, 190, 48);
height:170px;
width:810px;
}
#honoring {
position:relative;
background-color:rgb(9, 65, 30);
width:810px;
top:-30px;
font-size:20px;
height:400px;
}
#honoringTextDiv {
position:relative;
width:740px;
left:70px;
top:50px
}
#infoText {
color:white;
font-size:25px;
}
#honoringText {
color:rgb(242, 183, 51);
}
#benifit{
color:white;
font-size:25px
}
#morgridge {
position:relative;
top:20px
}
#sponsorships {
position:relative;
left:20px;
top:-30px;
height:300px;
width:400px;
border-right-style:solid;
border-right-color:rgb(160, 202, 129);
border-right-width:1px;
}
#inventiveSponsorsDiv {
position:relative;
left:425px;
top:-155px
}
#dmns {
position:relative;
top:-40px;
}
#1stbank {
position:relative;
top:80px;
}
#inspirationalSponsors, #inventiveSponsors{
position:relative;
top:0px;
color:rgb(123,190,48);
font-size:18px;
}
#inventiveSponsors {
top:-20px;
}
#names, #names2 {
line-height:25px;
font-size:14px
}
#names2 {
position:relative;
top:-94px;
left:160px;
text-align:left;
}
回答by NatalyaKst
Try to use URL without "http":
尝试使用没有“http”的 URL：
<link href="//fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
回答by Shaan Singh
Few tips:
1. Use the HTML code in the beginning of your <head>, before anything else. Example: <head>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
/* Rest of the code after this */
</head>
2. If that doesn't work, put this in your CSS file instead:
@import url(http://fonts.googleapis.com/css?family=PT+Sans);
一些提示：
1. 使用开头的 HTML 代码<head>，然后再使用其他任何内容。示例：<head>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
/* Rest of the code after this */
</head>
2. 如果这不起作用，请将其放在您的 CSS 文件中：
@import url(http://fonts.googleapis.com/css?family=PT+Sans);
回答by el_coder
Ask yourself this:
问问自己：
1. Are you developing online or offline (if online check number 2)
2. Make sure your browser does not have a shield icon because this
means the browser is blocking the font and you need to click
the allow button.
3. Check for spelling errors or anything suspicious.
4. Finally @import is the safest way I think.
回答by James Brett
I had the same problem and if using the CSS tag of:
我遇到了同样的问题，如果使用以下 CSS 标记：
"font: 3em bold;" ---this overrides the google api call and loads your next default font.
“字体：3em 粗体；” ---这会覆盖 google api 调用并加载您的下一个默认字体。
SOLUTION: Use font-style and font-size
解决方案：使用字体样式和字体大小
回答by Dr.X
Check whether your css file is loaded after vendor stylesheets. For example, bootstrap.css should be before your css file.
检查您的 css 文件是否在供应商样式表之后加载。例如，bootstrap.css 应该在你的 css 文件之前。
回答by Saino
I had this issue today. And the metter if you made your test in with a httpsurl you need to change the link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"by href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet".
Otherwise, there is a conflict issue.
我今天遇到了这个问题。而如果你梅特与httpsurl使你的测试，你需要改变的链接href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"通过href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet"。否则，存在冲突问题。
I hope that will hope someone.
我希望这会希望有人。
