@ font-face用於遠程字體的模糊/粗體/扭曲字形

我試圖切換到@font-face而不是依賴用戶安裝字體（準確地說，它是Terminus字體，而不是TTF版本）。@ font-face用於遠程字體的模糊/粗體/扭曲字形

不幸的是，我用遠程託管的文件時如圖所示在該圖像上時已經跑進字體的一些奇怪的「加粗」或「失真」：

enter image description here

正如你所看到的，由於某些原因，遠程獲取的字體在大小爲12,14,16,18,20,24時被扭曲，而惠斯特本地字體對它們應用了某種「標準化」，以使這些部件看起來很漂亮而且就地。

另一件事提的是，我已經嘗試使用FontSquirrel's WebFont Generator該演示HTMLS截圖沿着這些CSS代碼分別顯示：

@font-face { 
    font-family: 'terminus_ttfmedium'; 
    src: url('terminusmedium-4.38-webfont.ttf') format('truetype'); 
}

和

@font-face { 
    font-family: 'terminus_ttfmedium'; 
    src: local('Terminus (TTF)'); 
}

總站（TTF ）是同一包文件，只是安裝到/usr/share/fonts/。

任何有識之士將不勝感激！

編輯：更改FontSquirrel高級選項似乎根本沒有幫助解決這個問題。

EDIT2：我所有的方法都沒有嘗試過在Firefox上工作。另外，我已經將字體複製到工作目錄（本地使用的同一個目錄），通過「url」字段鏈接它，並且它仍然保持失真。這是徒勞的！

來源

2013-03-06 User2121315

[試圖重現沒有成功。]（http://jsfiddle.net/ASt75/）我也嘗試在本地的Apache服務器上。你在小提琴中看到了相同的效果，或者你可能知道爲什麼這不會重現你所看到的？ [這裏是小提琴爲我展示的方式。]（http://www.jmeas.com/files/screencaps/output.jpg） – jmeas 2013-03-09 15:19:39

@jmeas：嗯，這裏是[它如何找我]（http：//我。 imgur.com/VK17cz3.png）。我不確定是什麼讓我的本地字體看起來比遠程字體更流暢，不過：/ – User2121315 2013-03-09 16:52:59

你在Windows上嗎？ – jmeas 2013-03-09 17:07:00

或許你可以嘗試強制反鋸齒字體渲染：曾經有多個輸出部分

body { 
-webkit-font-smoothing: antialiased; 
font-smoothing: antialiased; 
}

來源

2013-03-12 05:43:25

唉，這也行不通：< – User2121315 2013-03-12 15:48:09

字體松鼠。 TTF不在的browers

 src: url('Bevan-webfont.eot?#iefix') format('embedded-opentype'), 
    url('Bevan-webfont.woff') format('woff'), 
    url('Bevan-webfont.ttf') format('truetype'), 
    url('Bevan-webfont.svg#BevanRegular') format('svg');

他們用它來與所有這些擴展字體包

的所有版本，不能似乎找到它的網站上了。

來源

2013-03-13 20:33:57 Dnaso

其實TTF只接受mozila，那裏有很多字體類型，比如TTF，SVG，WOFF，eot。你必須使用所有的字體文件。這是一個很棒的工具來生成字體。

http://www.fontsquirrel.com/tools/webfont-generator

這裏有一個例子：

@font-face { 
    font-family: 'YourFontName'; 
    src: url('gershwinscript.eot'); 
    src: url('gershwinscript.eot?#iefix') format('embedded-opentype'), 
     url('gershwinscript.woff') format('woff'), 
     url('gershwinscript.ttf') format('truetype'), 
     url('gershwinscript.svg#gershwin_scriptregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

我認爲，這將幫助你。

來源

2013-03-15 14:15:33

TTF只接受mozila？你肯定是這樣的嗎？因爲我的ttf可以被讀取，也就是說，雖然mozilla支持woff（和opera svg） – 2013-03-15 14:44:24

我同意這個答案，你需要本地託管的所有文件類型以跨瀏覽器工作，所以記住這一點。這不能回答你的問題，但確實是非常有用的信息。 – Xarcell 2013-03-15 17:01:18

請參閱瀏覽器支持http://caniuse.com/ttf – 2013-03-16 11:20:39

我將此添加爲答案，因爲我沒有足夠的評論意見。但是這是一個問題：您是否在本地安裝了Terminus？如果是這樣，請嘗試卸載它，看看你得到什麼。

道歉評論爲答案...

來源

2013-03-15 15:29:13 mike

-1

除了添加所有CSS代碼以及使其在多個瀏覽器上工作所需的所有文件，只需嘗試Google WebFonts即可。 http://www.google.com/webfonts

來源

2013-03-15 17:02:47 Xarcell

我發現在渲染模糊的元素上包含以下內容有所幫助。

-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 
font-smoothing: antialiased;

來源

2013-11-08 17:28:31 bryanc75

@ font-face用於遠程字體的模糊/粗體/扭曲字形

回答

相關問題