如果使用@ font-face或標準樣式錶鏈接添加Google字體的不同呈現形式？

Question

我不知道如何可能...如果我使用谷歌字體@font-face（創建localfont.com）或如果我使用標準link樣式表（從谷歌服務器下載）有不同的呈現。

標準「方式」的渲染比使用font-face（mh主機上的文件）添加的字體更好。我只用Firefox試過。 怎麼可能？

我者優先@字體面，因爲他們認爲這是對性能比較好，但它不是一個好主意，如果渲染會很醜...

我希望你能幫助我。對不起，我的英語和非常感謝！ :)

Answer 1

這是可能的。根據字體格式，渲染可能會有所不同。 使用該：

<link href='https://fonts.googleapis.com/css?family=ABeeZee' rel='stylesheet' type='text/css'> 

（更多或更少，它的變化取決於瀏覽器）這個樣式表給出：

@font-face { 
    font-family: 'ABeeZee'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('ABeeZee'), local('ABeeZee-Regular'), url(https://fonts.gstatic.com/s/abeezee/v9/TV7JXr7j4tW7mgYreANhGQ.woff2) format('woff2'); 
} 

在另一方面從localfont樣式表是：

@font-face { 
    font-family: 'ABeeZee'; 
    font-weight: 400; 
    font-style: normal; 
    src: url('/fonts/ABeeZee-regular/ABeeZee-regular.eot'); 
    src: url('/fonts/ABeeZee-regular/ABeeZee-regular.eot?#iefix') format('embedded-opentype'), 
     local('ABeeZee'), 
     local('ABeeZee-regular'), 
     url('/fonts/ABeeZee-regular/ABeeZee-regular.woff2') format('woff2'), 
     url('/fonts/ABeeZee-regular/ABeeZee-regular.woff') format('woff'), 
     url('/fonts/ABeeZee-regular/ABeeZee-regular.ttf') format('truetype'), 
     url('/fonts/ABeeZee-regular/ABeeZee-regular.svg#ABeeZee') format('svg'); 
} 

這第二個CSS具有多種格式的字體，瀏覽器將使用它可以理解的第一個，這可能與其他CSS中使用的不一樣。另一方面，字體文件本身可以是不同的，ABeeZee從localfont（現在）下載的大小爲13KB，但從谷歌它是17KB。由於它們不是同一個文件，你可能會得到不同的結果。

Answer 2

您可能需要使用text-rendering css屬性來調整字體的呈現方式。它可能會對字體的外觀造成很大的影響。

從這個article對CSS-技巧報價：

自動（缺省） - 瀏覽器發出的教育什麼時候能優化速度，易讀性和幾何精度，同時繪製文本的猜測。請注意，不同的瀏覽器會以不同的方式解讀此值。

p { 
    text-rendering: auto; 
} 

optimizeSpeed - 瀏覽器強調渲染速度超過易讀性和幾何精度繪製文本時。它禁用字距和連字。

p { 
    text-rendering: optimizeSpeed; 
} 

optimizeLegibility - 瀏覽器強調了渲染速度和幾何精度可讀性。這使得可以在特定字體的字體文件中使用特殊的字距和可選的連字信息。

p { 
    text-rendering: optimizeLegibility; 
} 

geometricPrecision - 瀏覽器強調了渲染速度和可讀性幾何精度。字體的某些方面（如字距調整）不會線性縮放，因此geometricPrecision可以使用這些字體使文本看起來更好。當縮放SVG字體時，瀏覽器計算像素大小，然後舍入爲最接近的整數。 geometricPrecision屬性允許更多流體縮放。注意：只有WebKit瀏覽器應用此流體值，Gecko會像optimizeLegibility一樣處理該值。

p { 
    text-rendering: geometricPrecision; 
} 

希望幫助。