@字体面不会对网页加载的字体 [英] @font-face not loading fonts on webpages
问题描述
我正在开发一个网站在本地，因此在Windows 8上我的WAMP服务器提供了网页。该网站将设一个安全的服务器上，以便为安全起见，我无法使用 fonts.google.com CDN 源$ C $ C。我想使用 @字体面指令嵌入在的.css 文件中的字体，但字体做没有在任何浏览器中正确显示。该字体的的将会的显示，如果我包括托管CDN链接。我已阅读SO几个职位，但没有一个我读过回答我的具体问题。下面是我的code，我已经采取了措施来解决这个问题：
I'm developing a website locally, so my WAMP server on Windows 8 is serving up the pages. This site will be hosted on a secured server so for security reasons, I can't use the fonts.google.com CDN in the source code. I want to use the @font-face directive to embed the fonts in the .css files, but the fonts do not display in any browser correctly. The fonts will display if I include the hosted CDN link. I have read several posts on SO, but none of them I have read answer my particular problem. Below is my code and the steps I have taken to solve this:
在定义的的main.css
@font-face {
font-family: 'Open Sans', sans-serif;
src: url('../csfonts/OpenSans.ttf') format('truetype');
}
@font-face {
font-family: 'Lato', sans-serif;
src: url('../csfonts/Lato.ttf') format('truetype');
}
在使用的CSS的 custom.css 文件
body {
font-family: 'Open Sans', sans-serif;
}
在Chrome浏览器控制台，的main.css 和 custom.css 都装在网络窗口，但字体不显示。我检查了元素控制台 元素窗口，都应该使用开放Sans字体，并在样式面板则说明该开放Sans字体是过写黑体字体。然而，字体看起来像黑体，无法打开三世。我也查了链接文件的级联为了在我的HTML，以及它们的路径，而的main.css 是页面上的最后一个链接的样式表，所以的main.css 应采取$（ custom.css 下） p $ pcedence吧？
In the Chrome console, main.css and custom.css are both loading in the Network window, but the fonts are not displaying. I've inspected the elements in console Elements window that are supposed to be using the Open Sans font, and in the Styles panel it shows that the Open Sans font is over-writing a helvetica font. Yet, the typeface looks like Helvetica, not Open Sans. I've also checked the cascade order of the linked files in my HTML, as well as their paths, and main.css is the last linked stylesheet on the page (beneath custom.css), so main.css should take precedence right?
我还检查这太线程想这可能是我有到创建和编辑.htaccess文件（YouTube视频），我做到了。在httpd.conf文件中，我发现了以下说明，但我还没有修改它，我不知道要修改它来读取。
I also checked this SO thread thinking it may be that I have to create and edit an .htaccess file (youTube video), which I did. In the httpd.conf file, I found the following instructions, but I haven't modified it yet, and I don't know what to modify it to read.
#
# The following lines prevent .htaccess and .htpasswd files from being
# viewed by Web clients.
#
<Files ".ht*">
Require all denied
</Files>
在的htaccess 文件我创造，我放在下面（的此了这么线程）：
In the .htaccess file I created, I placed the following (taken from this SO thread):
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
我保存 WAMP 在我的 WWW 文件夹此文件。然后，我删除从我的网页CDN链接，并刷新浏览器。该字体还是不显示。这似乎是默认为黑体或一些无衬线字体。
I saved this file in my www folder on WAMP. I then removed the CDN link from my pages, and refreshed the browser. The fonts still do not display. It appears to be defaulting to helvetica or some sans serif font.
可能有人让我知道我做错了，如何解决这一问题？谢谢你。
Could someone let me know what I am doing wrong and how to fix this? Thanks.
推荐答案
经过google搜索，我找到了我要找的答案。我将它张贴在这里，如果其他人有兴趣。我张贴到SO寻求做大量的研究后首先答案。有很多职位对SO关于这个主题，但是，没有那些我读回答我的问题 - 我点击了链接很多，因为我打字的标题和阅读。以下是轻松解决方案，我一直在寻找。这是WebKit的生成并打包成一个.zip文件中包含的字体以及如何让他们安装，配置和在您的网站上运行的所有指令。希望这可以帮助别人。它帮助我。我们都新手在同一时间，或可能已经忘记了如何做。干杯。
After more googling, I found the answer I am looking for. I will post it here if anyone else is interested. I post to SO seeking answers after doing lots of research first. There are alot of posts on SO about this subject, yet, none of the ones I read answered my question -- and I clicked on alot of links as I was typing the title and read them. Below is the easy solution I was looking for. The webkit that is generated and packaged as a .zip file contains the fonts and all the instructions on how to get them installed, configured and running on your website. Hope this helps others. It helped me. We were all newbies at one time, or may have forgotten how to do something. Cheers.
这篇关于@字体面不会对网页加载的字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
