同じブラウザ。同じウィンドウのバージョン。同じスタイル。異なるフォントレンダリング

Question

クライアントの1人は、彼のウェブサイトのフォントが変更されたと言います。彼はWaybackと現在のサイトの間のスクリーンショットを証拠として提供しました。

違いは微妙ですが、高さと重さに違いがあるようです。

私たちも、Chromeの総合的な形式のビュー（コンピュー - > [すべてを表示）を使用してBrowserStack/Windowsの10 /クローム56を使用して、2つのバージョン間のスタイルを比較した時間を過ごしてきた私たちはゼロの違いを見つけることができます。

すべてがまったく同じです。ここで我々のテストのURLは以下のとおりです。

• https://web.archive.org/web/20170201023953/https://www.kitces.com/
• https://www.kitces.com

スティッキーヘッダーが作動するまでスクロールダウンし、違いを確認するには。

我々は何かを明らかに不足していますか？私たちは仕事をやめて販売に入る必要がありますか？フォントをキャッシュ

Answer 1

は多分それが違いだ、との.ttfライブバージョンが.woff2あるのですか？私はちょうどそれらのボットが.woff2をサポートしていないと仮定します.Googleは.ttfでそれらを提供しました。ライブ版があなたに.woff2のものを提供しても、アーカイブされた.ttf版のフォントが表示されます。

キャッシュされたフォントがある：

は

/* 
    FILE ARCHIVED ON 3:34:20 Feb 1, 2017 AND RETRIEVED FROM THE 
    INTERNET ARCHIVE ON 22:23:03 Feb 14, 2017. 
    JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE. 

    ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C. 
    SECTION 108(a)(3)). 
*/ 
@font-face { 
    font-family: 'Montserrat'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Montserrat-Regular'), url(/web/20170201033420/http://fonts.gstatic.com/s/montserrat/v9/zhcz-_WihjSQC0oHJ9TCYC3USBnSvpkopQaUR-2r7iU.ttf) format('truetype'); 
} 
@font-face { 
    font-family: 'Montserrat'; 
    font-style: normal; 
    font-weight: 700; 
    src: local('Montserrat-Bold'), url(/web/20170201033420/http://fonts.gstatic.com/s/montserrat/v9/IQHow_FEYlDC4Gzy_m8fcvEr6Hm6RMS0v1dtXsGir4g.ttf) format('truetype'); 
} 

一方、ライブウェブサイトのフォントは次のとおりです。

/* vietnamese */ 
@font-face { 
    font-family: 'Montserrat'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v10/SKK6Nusyv8QPNMtI4j9J2yEAvth_LlrfE80CYdSH47w.woff2) format('woff2'); 
    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 
} 
/* latin-ext */ 
@font-face { 
    font-family: 'Montserrat'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v10/gFXtEMCp1m_YzxsBpKl68iEAvth_LlrfE80CYdSH47w.woff2) format('woff2'); 
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 
} 
/* latin */ 
@font-face { 
    font-family: 'Montserrat'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v10/zhcz-_WihjSQC0oHJ9TCYPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 
} 
/* vietnamese */ 
@font-face { 
    font-family: 'Montserrat'; 
    font-style: normal; 
    font-weight: 700; 
    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(http://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fcjh33M2A-6X0bdu871ruAGs.woff2) format('woff2'); 
    unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB; 
} 
/* latin-ext */ 
@font-face { 
    font-family: 'Montserrat'; 
    font-style: normal; 
    font-weight: 700; 
    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(http://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fchHJTnCUrjaAm2S9z52xC3Y.woff2) format('woff2'); 
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 
} 
/* latin */ 
@font-face { 
    font-family: 'Montserrat'; 
    font-style: normal; 
    font-weight: 700; 
    src: local('Montserrat Bold'), local('Montserrat-Bold'), url(http://fonts.gstatic.com/s/montserrat/v10/IQHow_FEYlDC4Gzy_m8fcoWiMMZ7xLd792ULpGE4W_Y.woff2) format('woff2'); 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 
} 

UPD：違いはバージョンである、あなたはリンクの.ttfから見ることができるように、リンク「v9」を含み、一方、.woff2は「v10」である。 "v10" .ttfと "v10" .woff2を比較すると、同じようにレンダリングされます。

フォントの以前のバージョンとの愛にあった場合、あなたはCSSを経由する@ font-faceを設定し、代わりにv9のフォントへのリンクをハードコーディングすることができますが：

@font-face { 
    font-family: 'Montserrat'; 
    font-weight: 400; 
    font-style: normal; 
    src: url('http://fonts.gstatic.com/s/montserrat/v9/zhcz-_WihjSQC0oHJ9TCYFQlYEbsez9cZjKsNMjLOwM.eot'); 
    src: url('http://fonts.gstatic.com/s/montserrat/v9/zhcz-_WihjSQC0oHJ9TCYFQlYEbsez9cZjKsNMjLOwM.eot?#iefix') format('embedded-opentype'), 
     local('Montserrat Regular'), 
     local('Montserrat-regular'), 
     url('http://fonts.gstatic.com/s/montserrat/v9/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2') format('woff2'), 
     url('http://fonts.gstatic.com/s/montserrat/v9/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff') format('woff'), 
     url('http://fonts.gstatic.com/s/montserrat/v9/zhcz-_WihjSQC0oHJ9TCYC3USBnSvpkopQaUR-2r7iU.ttf') format('truetype'), 
    url('http://fonts.gstatic.com/l/font?kit=zhcz-_WihjSQC0oHJ9TCYKWUboTb-jS2tyCOQMtm97g&skey=7bc19f711c0de8f&v=v9#Montserrat') format('svg'); 
}