2011-03-12 33 views
1

我們有一些非標準的網絡字體(我們有許可證),並且我們收到了該字體的 .otf版本。有一些在線工具可以將字體轉換爲網頁格式,然後用一些CSS來包含字體,到目前爲止非常好。@ font-face爲不同的文件顯示不同的字母間距

但是,當在不同瀏覽器中顯示文本時,渲染文本變得更寬/更小,並且字間距也會變化。我測試過以確保字體實際上在不同的瀏覽器中使用,並且一切正常。

有4種字體文件需要支持所有瀏覽器,並且它似乎每個文件都有自己的繼承字母間距和字間距爲每個字體大小使用。

如果你想看到的包括在這裏的講話,它是:

@font-face { 
    font-family: 'myfont'; 
    src: url('myfont.eot?') format('eot'), 
     url('myfont.woff') format('woff'), 
     url('myfont.ttf') format('truetype'), 
     url('myfont.svg#webfontaAipHhrc') format('svg'); 
    } 

我認爲解決這個問題的最好辦法是TE產生在不同模式格式的字體具有相同字處理和信 - 間距,只有我不知道如何做到這一點。

字體內部使用EM作爲glypth寬度。因此,將文檔font-size設置爲某個值並使用相應的字體進行縮放,然後爲使用該字體的每個元素設置一個字體大小是有意義的。

同時在@ font-face定義中設置字母和單詞間距不起作用,因爲它是對字體自己設置的間距的調整。

任何maby都知道字體生成器對每個生成的字體都有相同的單詞和字母間距?或者有其他的解決方案/建議?

我試過2臺字體發電機,但只記得最後一個,http://www.fontsquirrel.com/fontface/generator

也同時是它,任何人都知道如何測試,如果所有語言(UTF-8字符)可以打印給出的字體?我試圖打印一串utf-8字符,看看它們是否可以顯示,但當然我不知道所有的語言,所以我不知道它的好與不好。

謝謝:)

編輯:

我做的如何不同的瀏覽器,我使用渲染字體

http://www.imagedump.nl/img9/8589/15fonts.png

使用

部份CSS printscreens:

.test { 
    font-family: myfont; 
    font-size: 20px; 
    letter-spacing: -0.67px; 
    word-spacing: 1px; 
} 

我尋找的東西是有一些默認的起始位置,所有瀏覽器呈現字體相同

與'不同'部分我認爲像ff這樣的瀏覽器呈現文本不同於像IE這樣的瀏覽器,誰兩者都使用不同的生成字體文件。 但是當它們都使用相同的生成字體文件(woff)時,chrome與ff也有區別

回答

1

問題中沒有足夠的細節來理解問題。瀏覽器確實使用字體的內部空間。根據顯示的位置不同,它不是「不同的」。

也就是說,應用於字體的提示可能會影響其在Window瀏覽器上的顯示,因爲它會嘗試將字體輪廓放入像素網格中。通過這樣做,整個字體可以水平增長/縮小,以適應網格。我已經看到了。

請問這是你所看到的嗎?否則,我希望看到並排的截圖,以便我能夠理解你在說什麼。

+0

已編輯的原始文章 – 2011-03-12 15:05:18

+0

這可能是由於光柵化器和應用於字體的提示。由於Windows使用了幾種不同的渲染引擎,因此我對您的結果並不感到驚訝。您可以嘗試取消選中生成器中的提示選項,看看它是否有幫助。 – 2011-03-17 02:12:39

+0

@Paul,是否有助於取消提示? – Michael 2011-09-05 11:35:32

0

爲了解決這個問題,在我看來,僅僅使用一些瀏覽器特定的指令來呈現字體是恰當的。我沒有足夠的精通知道在這種情況下工作的p和h標籤上的瀏覽器特定樣式的CSS。

+0

感謝您的評論,我真的想避免這種情況,因爲它將是瀏覽器/瀏覽器版本/ os/os版本依賴的CSS,這意味着很多css文件。但是,這聽起來像是唯一的選擇 – 2011-03-19 08:18:56

相關問題