使用網絡（@ font-face）字體

我有一個基本問題，可能是指更多的設計領域，但它仍然是一個網絡編程。使用網絡（@ font-face）字體

假設我需要在我的web應用程序中使用Palatino-Linotype字體。我如何更好地將它嵌入到我的網頁應用程序中？

我知道的方法：
1）去font.com購買各種palatino-linotype：normal，bold，italic，italic-bold。 4個不同的文件。
2）然後，我通過fontface風格加載字體

@font-face { 
    font-family: "Palatino-Linotype-normal"; 
    src: "..." 
} 
@font-face { 
    font-family: "Palatino-Linotype-italic"; 
    src: "..." 
}

3）AI有4種不同的字體，在HTML標記我需要明確設置元件的字體，使其粗體或斜體，或斜體粗體（那我最不喜歡的）。

問題：
1）是使用自定義Web字體的工作流程？
2）也許有一種方法來處理這種字體，就像平常的字體一樣，只在父元素上設置一種字體，而對於內部設置只有style =「font-style：italic;」如果我希望他們是斜體。
3）關於性能的問題，網絡字體渲染速度與通常字體的渲染速度有什麼不同？

來源

2012-11-30 WHITECOLOR

我就可以走，就是沒有渲染的區別，你_must_使用備用字體的（3可能是不夠好）和高質量的字形很難找到（嘗試調整字體的大小，他們通常不會很好）。我的方法與你的方法略有不同，我使用任何格式的字體（大多數網站都有每月免費贈品，我有一個收藏），並使用在線轉換器生成跨瀏覽器格式。 –

使用'@ font-face'時性能有所不同，因爲如果用戶的計算機中沒有字體，則將從服務器下載並呈現給客戶端。 – Jrod

是的，但他們詢問渲染時間差... –

邏輯方式，一般由瀏覽器支持，是聲明在一個單獨的規則中的每個字體，如在

@font-face { 
    font-family: foobar; 
    src: url("foobar-regular.woff"); 
} 
@font-face { 
    font-family: foobar; 
    font-style: italic; 
    src: url("foobar-italic.woff"); 
}

，然後只聲明font-family: foobar和直接或indirectely使用font-style: italic經由<i>，<em>，和其它導致默認呈現爲斜體的標記。

我簡化了代碼，自然你應該通過瀏覽器識別字體來提供不同的格式。

像FontSquirrel這樣的服務會生成不同的代碼，但修復它們生成的代碼或從頭開始編寫代碼非常簡單。

我有意使用「foobar」而不是「Palatino Linotype」，因爲後者在法律上不可用作可下載的字體;至少這是推測，直到證明不然。（網上有很多網站非法散佈或出售字體。）

來源

2012-11-30 17:04:25

非常感謝，看來這是我需要知道的。 – WHITECOLOR

查看Fontsquirrel http://www.fontsquirrel.com/它幫助我生成兼容多種瀏覽器的字體和CSS：s。

來源

2012-11-30 14:22:32 Ogelami

你知不知道，有沒有辦法將一些網頁字體的不同風格（常規，粗體，斜體）合併爲一個，並且可以在元素上獲得大膽的Palatino Linotype設置。 – WHITECOLOR

如果您只使用Palatino Linotype Normal，然後在CSS中將其更改爲粗體，則不會得到與Palatino Linotype Bold相同的結果。這裏的事情是瀏覽器呈現將被用來實現這一點，它會吸引很多。我的意思是，對我來說，也許對你來說，它看起來是一樣的 - 但不適合設計師:)

還有更多的一種字體比正常，粗體和斜體。有光線，半光線，黑色等等。設計師傾向於使用這些。

因此，一般來說，對於第一個和第二個問題：對不同的樣式使用不同的字體，並且無法爲不同的樣式使用不同的面，需要另一種字體系列指示。

至於第三個：性能是嵌入字體的問題。但大多不是因爲渲染，而是因爲字體文件很繁重。所以一定要緩存它們，並只使用那些需要的。例如http://www.fontsquirrel.com/在上一個答案中實際上默認會添加所有下載的太多文件，因此請進行一些研究以瞭解不同格式以及需要嵌入的內容。

來源

2012-11-30 14:28:18 povilasp

「如果您只使用Palatino Linotype Normal，然後在CSS中將其更改爲粗體，則不會得到與Palatino Linotype Bold相同的結果。」是的，我在我的問題中寫了這個。但是有沒有辦法將這些字體結合起來，並且可以在元素上獲得大膽的Palatino Linotype設置？ – WHITECOLOR

但是有沒有辦法將這種字體結合起來，並且可以在元素上獲得大膽的Palatino Linotype設置？ - 簡而言之，不，但可能最好的方法是使用類似.bold，.italic等的css並相應地應用它們。 – povilasp

感謝您的回覆。 - ） – WHITECOLOR

在您的web應用程序中使用Palatino-Linotype字體時，請使用谷歌的網絡字體。 https://developers.google.com/webfonts/docs/webfont_loader

網頁字型Loader是一個JavaScript庫，讓你在字體加載更多的控制比谷歌網頁字體API提供。 Web字體加載程序還允許您使用多個Web字體提供程序。它由Google和Type kit共同開發。

更多inforamtion請點擊此鏈接到我的博客： http://webtemplatesmonster.blogspot.in/2013/02/how-to-use-font-face.html

@font-face { font-family: 'Awesome Font'; src: 
     url('awesome-font.eot'); /* IE9 Compat Modes */ src: 
     url('awesome-font.eot?#iefix') format('embedded-opentype'), /* 
     IE6-IE8 */ 
       url('awesome-font.woff') format('woff'), /* Modern Browsers */ 
       url('awesome-font.ttf') format('truetype'), /* Safari, Android, iOS */ 
       url('awesome-font.svg#svgFontName') format('svg'); /* Legacy iOS */ }

來源

2013-02-06 11:34:06 raju

使用網絡（@ font-face）字體

回答

相關問題