@ font-face即使在嘗試了所有我能想到的東西之後仍然無法正常工作

我真的需要@font-face代碼的幫助。它似乎並不看我的字體文件。@ 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來得到它的工作有什麼改變？

（我也檢查了類似的問題在這裏和其他地方在網絡上，並使用this網站無濟於事嘗試。）

謝謝！

更新： 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') 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; }

我使用的名稱 '道' 只是因爲bozdoz了它。

所有的字體在這裏：

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

，這些都是他們的名字：

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

來源

2011-11-13 rlesko

你是否嘗試過使用像url這樣的引號（「Univers.ttf」）;'？ –

還有你指定'font-family：「MyFontName」;'爲你的自定義字體嗎？ –

你也可以發佈整個font-face樣式和html/css代碼，在其中使用它來查看問題是否在其他地方？ –

首先，感謝大家的很大，有很大的幫助！代碼@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') 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.

的問題是，@font-face沒有看到，因爲它是@media screen後！我把它放在@media screen之前和/* Info */之後，它的工作完美無缺。

而且，好像我可以使用Wordpress時，使用絕對和相對路徑...

再次感謝大家對您的幫助！

來源

2011-11-14 09:05:29 rlesko

你想要做這樣的事情：

@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }

字體定義文件mu相對於你的CSS文件。所以如果你的CSS是在：

/Content/css/main.css

然後你的字體必須位於相同的文件夾。如果指定

@font-face { font-family: Delicious; src: url('fonts/Delicious-Roman.otf'); }

那麼你的字體定義將在

/Content/css/fonts/Delicious-Roman.otf

您可能需要驗證您的服務器不被阻止下載您的字體。嘗試網址，看看你是否在給定的網址獲得404或403。

來源

2011-11-13 22:39:41

我不認爲他可以在WordPress css中使用相對路徑，我相信他正在使用它。 – bozdoz

這將是這一個：'src：url（images/Univers.ttf）;' 而且我不知道我是否可以在Wordpress中使用相對路徑。：/ – rlesko

好像你可以在Wordpress CSS中使用絕對路徑和相對路徑。 – rlesko

您是否正確地使用它嗎？這是@ font-face的格式。注意文件的數量。您可以使用Font Squirrel爲跨瀏覽器兼容性創建所有必需的字體。另外，它看起來像你使用WordPress。我相信你必須在WordPress上使用絕對路徑（即列表中的第一個）。希望這可以幫助。

<style> 
@font-face { 
    font-family: 'lane'; 
    src: url('type/lanehum-webfont.eot'); 
    src: url('type/lanehum-webfont.eot?#iefix') format('embedded-opentype'), 
     url('type/lanehum-webfont.woff') format('woff'), 
     url('type/lanehum-webfont.ttf') format('truetype'), 
     url('type/lanehum-webfont.svg#LaneHumouresqueRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 
.font { font-family:"lane", arial, serif; } 
</style>

來源

2011-11-13 22:40:40 bozdoz

另請注意，@ font-face僅適用於當前的瀏覽器。在您的自定義字體後面添加替代字體很重要： arial，serif等。 – bozdoz

檢查原始問題中的更新。不幸的是，它不起作用... 順便說一句，當我使用我的原始代碼時，它使用簡單的HTML + CSS，但是當我將它用作Wordpress主題時，它停止工作。 – rlesko

也許這是一個WordPress的問題。它也適用於這裏：http：// jsfiddle。net/bozdoz/4frqN/ 我很想知道爲什麼會發生這種情況。 – bozdoz

你應該嘗試fontSuirrel's發生器，其腳本已大大測試，可與許多瀏覽器兼容。生成字體時請選擇高級設置。某些瀏覽器可能不具有使用ttf的字體，以便他們爲您提供eotwoff和ttf

來源

2011-11-13 22:41:55

我的觀點正是:) – bozdoz

試過了，沒有工作... 我會再試一次。 – rlesko

@rlesko你可以發佈你試過的CSS嗎？ –

我從評論的答覆建議的能力：

嘗試用引號：

url("Univers.ttf");

檢查你有字體家族或否則你不能在你的代碼中使用你的字體：

font-family: "MyFontName";

您的自定義字體系列，你會在CSS中使用，如：

p { font-family: "MyFontName", Arial, sans-serif; }

來源

2011-11-13 22:46:28

@ font-face即使在嘗試了所有我能想到的東西之後仍然無法正常工作

回答

相關問題