首頁猿問非視網(wǎng)膜顯示屏上的 HTML...

非視網(wǎng)膜顯示屏上的 HTML 字體呈現(xiàn)問題

Html5

尚方寶劍之說 2023-10-24 17:01:17

我無法按照在 Google 字體演示網(wǎng)站上呈現(xiàn)的方式在我的網(wǎng)站上呈現(xiàn) Poppins。當(dāng)使用非視網(wǎng)膜顯示器時，它會呈現(xiàn)“太薄”，例如，當(dāng)我在 font.google.com 上查看相同的文本時，T 上的條只有 1 像素高，而不是 1.5 像素高。我更喜歡它在谷歌字體上的顯示方式。在我的網(wǎng)站上，字體看起來在頂部“被切碎”，但我無法弄清楚他們在 HTML 中做了什么以獲得不同的渲染。此 codepen演示了該問題，但請注意：您需要非視網(wǎng)膜顯示器才能看到該問題！代碼：<html><head> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet" /></head><style> body { margin: 48px; font-family: "Poppins", sans-serif; font-weight: 700; font-style: normal; font-size: 18px; } main { display: grid; grid-template-columns: 20% 30% 40%; column-gap: 5%; align-items: center; } h2 { font-size: 1.2em; font-weight: normal; align-self: center; } a { color: #000; } small { display: block; font-weight: normal; font-size: 12px; } img:first-of-type { grid-row-end: span 2; }</style><body> <h1>??This issue is only visible on non-retina display!</h1> <main> <h2> Browser rendering </h2> <div> TITLE TEXT HERE IS 18<br /> <small>^^^ T bars will be too thin on non-retina browser</small> </div> <img src="https://i.imgur.com/7LyzjJy.png" /> <h2> Screenshot of Chrome on MacOS (broken) </h2> <div> <img src="https://i.imgur.com/2OZ0wv6.png" /> <small>^^^ Notice how the T bar is too thin.</small> </div> <h2> Google Fonts<br /> (screenshot of Bold 700 on <a href="https://fonts.google.com/specimen/Poppins?preview.text=HTML+TITLE+TEXT+HERE+IS+18&preview.text_type=custom&selection.family=Poppins:wght@400;700&sidebar.open"> the demo page</a>) </h2> <div> <img src="https://i.imgur.com/dgld0Jw.png" /><br /> <small>^^^ Notice how the T bars are thicker</small> </div> <img src="https://i.imgur.com/pQPZ6Ch.png" /> </main></body></html>

查看完整描述

2 回答

不負(fù)相思意

TA貢獻(xiàn)1777條經(jīng)驗獲得超10個贊

我明白你的意思，似乎這個字體的最新版本有一些問題，其他人也抱怨過?，F(xiàn)在為什么它在谷歌上顯示正常？谷歌腳本使用的演示版本可能與他們的字體 CDN 上的版本不同，盡管我不確定

解決方案：

在他們解決問題之前，請使用 Webfont

與你筆中的字體相同的CSS，除了這是一個舊版本，你可以使用像webfont這樣的東西將它托管在你自己的服務(wù)器上（我相信你知道如何做到這一點，但萬一你不知道）?fontsquirrel使程序太簡單了。

順便說一句，這是在 Mac 和單獨的高清屏幕上

注意：?我注意到字母/單詞之間有一點間距，但沒有什么不能用一些 CSSletter-spacing或word-spacing

反對回復(fù) 2023-10-24

一只甜甜圈

TA貢獻(xiàn)1836條經(jīng)驗獲得超5個贊

首先，自 macOS Mojave 以來，Apple 默認(rèn)禁用了字體平滑功能。這在視網(wǎng)膜顯示器上很難注意到，但在非視網(wǎng)膜顯示器上很容易注意到。執(zhí)行defaults write -g CGFontRenderingFontSmoothingDisabled -bool NO并注銷基本上可以解決問題。如果沒有字體平滑，文本看起來會小一些。

第二個問題似乎是谷歌字體的工作方式。當(dāng)您在 Google Fonts 演示頁面上鍵入預(yù)覽文本時，您只會加載該給定文本所需的字符 - 這是為了節(jié)省帶寬，因為您將下載大約 18 種樣式。

不過字體似乎有點不同。