如何使自定義CSS字體呈現完全像設計

我正在與一些非常出色的設計師合作。在翻譯他們的設計時，他們問我爲什麼有時候我們沒有完全按照他們的設計描繪非系統字體。一個非常最近的例子可以連接到這個問題在圖像中示出（忽略紅色註解）：如何使自定義CSS字體呈現完全像設計

enter image description here

我經由一個JavaScript包括，允許我利用新字體的字體使用從fonts.com - 我的CSS中的家庭。我想提請你注意兩件事情：

a）在左邊，注意描述文本「努力......」比「Lorem ipsum ...」要大膽得多。字體是「Droid Serif W01 Italic」。

b）在右側，注意「MEET ONE」比「COMMERZBANK」更大膽。字體系列是「UniversLTW01-57Condense 723821」。

我確定字體重量：正常。然而，一些電腦上的東西仍然顯得很大膽......而且它看起來會根據您所在的操作系統和瀏覽器而有所不同。這似乎是我可以用美觀的方式修改這些字體重量的唯一方法，就是通過選擇字體系列的另一種變體（如斜體或濃縮版本（如果它們存在））。但通常情況下，我仍然無法在所有不同的操作系統和瀏覽器組合上正確渲染。

你們如何解決這些問題？我可以使用什麼技術使字體完全按照設計中的描述進行渲染，而不管操作系統和瀏覽器是什麼？

來源

2013-03-24 John

不像Photoshop等軟件的花哨，瀏覽器並沒有使字體渲染的先進方式。一般來說，如果您想要在頁面上呈現正常（非粗體）和粗體字體，則應爲兩者提供字體文件，否則您將無法獲得確切的結果。斜體也是如此。如果沒有這些額外的文件，瀏覽器會模擬粗體或斜體，而且它們都會以不同的方式（並且通常很糟糕）。即便如此，也無法讓它們在瀏覽器和操作系統之間看起來相同。 – 2013-03-24 02:45:35

*「，它似乎取決於您所在的操作系統和瀏覽器」* - 這是您的密鑰。所有瀏覽器都以不同的方式渲染所有字體有些差別很小，不太明顯。 – animuson 2013-03-24 02:46:39

Off-top：爲什麼設計師使用看起來模糊的字體，並使網頁上的大部分文字難以閱讀？爲什麼設計師不能使用尺寸小於18點和22像素的字體，看起來很薄，清晰，不模糊，像素寬一點（比如Tahoma，Verdana，Arial等）？爲什麼設計師在自定義字體中嵌入特殊的圖形符號，並且當不允許下載字體時這些符號變成不可打印的矩形？ – 2016-06-16 18:56:18

根據我的經驗，我總是發現Web上的字體渲染遠不如Photoshop或其他設計工具中的那麼好。這通常會導致這樣的問題。

在Photoshop中，設計師可以使用「額外」設置，如「Sharp」，「Crisp」，「Smooth」和「Strong」。所有這些變體都使字體渲染更加美觀。儘管如此，這些屬性並不適合我們。

這一切都歸結爲所有瀏覽器以不同方式實現的字體的抗鋸齒。跨所有瀏覽器都無法以相同方式呈現字體。這是僅使用專門爲網絡創建的字體的原因，因爲它們被設計爲在大多數常見尺寸的屏幕上具有良好的抗鋸齒功能。

但是，有一些技巧，你可以嘗試。我幾乎沒有經驗與他們，但希望我的背景答案和這些鏈接將給你靈感在哪裏可以找到關於這個複雜問題的更多信息。

對我來說，左圖像看起來像一個經典的反別名問題。正確的圖片，我不太確定。它幾乎看起來像另一種字體，並且尺寸應該足夠大才能正確渲染。

檢查這些鏈接，如果你想了解更多，希望他們能有所幫助：

Does CSS support text anti-aliasing such as "crisp, sharp etc" yet?

How to do font antialiasing in web page?

Webfont Smoothing and Antialiasing in Firefox and Opera

http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/

來源

2013-03-24 02:48:24 span

「的@字體 - 面對CSS at-rule，作者可以指定聯機字體來顯示文本在他們的網頁上。通過允許作者提供他們自己的字體，@ font-face消除了依靠用戶在其計算機上安裝的有限字體數量的需要。在@字體面的規則不僅可以在CSS的頂層被使用，而且在規則的任何CSS條件組裏面。」 -MDN

@font-face { 
    [font-family: <family-name>;]? 
    [src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]? 
    [unicode-range: <urange>#;]? 
    [font-variant: <font-variant>;]? 
    [font-feature-settings: normal|<feature-tag-value>#;]? 
    [font-stretch: <font-stretch>;]? 
    [font-weight: <weight>]; 
    [font-style: <style>]; 
    }

https://developer.mozilla.org/en-US/docs/CSS/@font-face

它不一個完美的解決方案，但它可以讓你更接近到你想去的地方。

來源

2013-03-24 02:56:21 apaul

此規則是否允許防止字體反鋸齒，並允許在任何網頁使用userContent.css代替細小，易讀和非模糊的字體，同時正確處理字體嵌入的符號不包含在Tahoma，Arial或其他系統字體中？ – 2016-06-16 18:47:15

我們面對你提出了同樣的問題，我不會重複這已經被這裏所涉及的有用信息。抗鋸齒和CSS只是一個圖片的一部分。所以我想要讓這個字體代工廠和許可如何可以計算到的東西去觸摸。

在PC端的web字體服務，如fonts.com和Typekit現實通常意味着結果是noticebly更糟。這與瀏覽器無關。

當你使用網絡字體的服務你在該服務如何處理字體嵌入擺佈。

不過，如果您使用的是爲網絡使用而優化的字體，它是可供購買，您可以直接控制的字體嵌入文件自己，this article has an good tip to improve rendering on Chrome for Windows.

例子代工廠的出售（或谷歌網絡字體免費）直接嵌入字體是FontSpring，MyFonts，商業類型等。

Hoefler Type剛剛推出了自己的字體服務，在PC上呈現精美。它與fonts.com和Typekit類似，因爲您不直接託管或嵌入字體。他們已經達到了前所未有的水平，解決了網頁字體的所有常見問題。他們調整了字體的大小，併爲各個瀏覽器定製了部署。與其他許多代工廠一樣，目前的限制是只能購買他們的字體。

由於這些併發症，我們通常會考慮早在一個項目個別字體的Web使用的選項。

來源

2013-07-04 04:46:35 jsuissa

從個人經驗和高層次的研究中，我發現使用sIFR（Scalable Inman Flash Replacement）或純字體替代品（如Typeface（http://typeface.neocracy.org:81/）和Cufon（http://cufon.shoqolate.com/generate/））可以取得令人滿意的效果。我已經使用了Cufon一段時間，並且我發現它是最接近您目前正在尋找的結果的最簡單和最有效的方法。如果您還沒有遇到這些解決方案，希望有所幫助。

來源

2015-03-14 04:58:49 pmrutu

如何使自定義CSS字體呈現完全像設計

回答

相關問題