@ font-face即使尝试了我可以想到的一切后也不能工作 [英] @font-face not working even after trying everything I could think of

问题描述

我真的需要帮助 @ font-face 代码。
它似乎没有看到我的字体文件。

我试图将路径更改为任何我可以想到的，创建新的文件夹，

我在Firefox和Chrome上测试。

我在CSS中尝试的代码：

  src：url（http://thefalljourneyindia.iblogger.org/wp-content /themes/thefalltheme/images/Univers.ttf）; 
 src：url（thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf）; 
 src：url（http://www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf）; 
 src：url（www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf）; 
 src：url（/wp-content/themes/thefalltheme/images/Univers.ttf）; 
 src：url（../ wp-content / themes / thefalltheme / images / Univers.ttf）; 
 src：url（wp-content / themes / thefalltheme / images / Univers.ttf）; 
 src：url（/thefalltheme/images/Univers.ttf）; 
 src：url（../ thefalltheme / images / Univers.ttf）; 
 src：url（thefalltheme / images / Univers.ttf）; 
 src：url（/images/Univers.ttf）; 
 src：url（../ images / Univers.ttf）; 
 src：url（images / Univers.ttf）; 
 src：url（www.thefalljourneyindia.iblogger.org/Univers.ttf）; 
 src：url（/Univers.ttf）; 
 src：url（Univers.ttf）; 
 src：url（../ Univers.ttf）; 
  

你能找到我应该把字体文件或什么改变在我的CSS中得到它工作？

（我也检查了类似的问题在这里和网络上的其他地方，并尝试使用

谢谢！

更新：
bozdoz的建议无效。
我使用FontSquirrel来获取字体。
这是CSS：

@ font-face {
font-family：'lane';
src：url（'http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot'）;
src：url（'thttp：//thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot？#iefix'）format（'embedded-opentype'），
url（'http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff'）格式（'woff'），
url（'http：// thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf'）format（'truetype'），
url（'http://thefalljourneyindia.iblogger.org/wp-content /themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular'）format（'svg'）;
font-weight：normal;
font-style：normal;
}

h1 {font-size：110px;
font-family：'lane'，georgia，serif;
color：＃000000;
}

我使用'lane'这个名称只是因为bozdoz。

所有字体都在这里：

http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme / images /

这些是他们的名字：

univers-webfont.eot，univers-webfont.woof，univers-webfont.ttf，univers-webfont.svg

解决方案

首先，感谢大家的伟大，伟大的帮助！
@ font-face 代码没有问题。
问题是我的整体CSS。
你看，我的CSS是这样写的：

  / * 
 Info 
 * / 
 
 @media screen {
 * {
 margin：0px; 
 padding：0px; 
} 
 html {background：black url（images / bg.jpg）; } 
 body {font：14px / 1.4 Georgia，serif; } 
 article，aside，figure，footer，header，nav，section {display：block; } 
 
 @ font-face {
 font-family：'lane'; 
 src：url（'http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot'）; 
 src：url（'thttp：//thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot？#iefix'）format（'embedded-opentype'），
 url（'http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff'）格式（'woff'），
 url（'http：// thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf'）format（'truetype'），
 url（'http://thefalljourneyindia.iblogger.org/wp-content /themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular'）format（'svg'）; 
 font-weight：normal; 
 font-style：normal; 
} 
 
等
  

问题是 @ font-face 没有看到，因为它在 @media screen 之后！
在我把它放在 @media screen 之后， / * Info * / 。

此外，似乎我可以使用绝对和相对路径使用Wordpress ...

，感谢大家的帮助！

I really need help with @font-face code. IT doesn't seem to see my font file.

I tried changing the path to anything I could think of, made new folders, renamed existing ones, put the font file in my root etc.

I'm testing in Firefox and Chrome.

Here are the codes that I tried in my CSS:

src: url(http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(http://www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(www.thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(/wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(../wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(wp-content/themes/thefalltheme/images/Univers.ttf);
src: url(/thefalltheme/images/Univers.ttf);
src: url(../thefalltheme/images/Univers.ttf);
src: url(thefalltheme/images/Univers.ttf);
src: url(/images/Univers.ttf);
src: url(../images/Univers.ttf);
src: url(images/Univers.ttf);
src: url(www.thefalljourneyindia.iblogger.org/Univers.ttf);
src: url(/Univers.ttf);
src: url(Univers.ttf);
src: url(../Univers.ttf);

Can you find out where I should put the font file or what to change in my CSS to get it to work?

(I also checked the similar questions here and elsewhere on the net and tried using this website to no avail.)

Thanks!

UPDATE: bozdoz's suggestion doesn't work. I used FontSquirrel to get the fonts. This is the CSS:

@font-face { font-family: 'lane'; src: url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot'); src: url('thttp://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot?#iefix') format('embedded-opentype'), url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff') format('woff'), url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf') format('truetype'), url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular') format('svg'); font-weight: normal; font-style: normal; }

h1{ font-size: 110px; font-family: 'lane', georgia, serif; color: #000000; }

I used the name 'lane' just because bozdoz had it.

All of the fonts are here:

http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/

and these are their names:

univers-webfont.eot, univers-webfont.woof, univers-webfont.ttf, univers-webfont.svg

解决方案

First of all, thank you all for your great, great help! There was no problem with the @font-face code. The problem was with my overall CSS. You see, my CSS was written like this:

/*   
Info
*/

@media screen {
* {
margin: 0px;
padding: 0px;
}
html { background: black url(images/bg.jpg); }
body { font: 14px/1.4 Georgia, serif; }
article, aside, figure, footer, header, nav, section { display: block; }

@font-face {
font-family: 'lane';
src: url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot');
src: url('thttp://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.woff') format('woff'),
     url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.ttf') format('truetype'),
     url('http://thefalljourneyindia.iblogger.org/wp-content/themes/thefalltheme/images/univers-webfont.svg#LaneHumouresqueRegular') format('svg');
font-weight: normal;
font-style: normal;
}

etc.

The problem was that @font-face wasn't seen because it was after @media screen! After I put it in front of @media screen and after /* Info */ it worked flawlessly.

Also, seems like I can use absolute and relative paths when using Wordpress...

Once again, thank you all for all your help!

这篇关于@ font-face即使尝试了我可以想到的一切后也不能工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！