Tag: fonts

在 CSS 裡面使用系統字型的選擇

一開始是看到「Show HN: Modern Font Stacks – New system font stack CSS for modern OSs (modernfontstacks.com)」這個，專案希望可以使用不用另外下載的字型 (系統內建字型)，但這個網站本身不好用，留言區提到的一些其他網站好用多了...

首先是「CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.」這個，把 Windows 與 macOS 上預設的字型都列出來，然後也列出對應的安裝比率。

而另外一個則是在 GitHub 上的專案「Modern Font Stacks」，把類似的字型放在一起。

看起來可以參考，比起只用 serif 或是 sans-serif 來說會多一些變化可以用。

新版 WordPress 預設的佈景主體將不會使用 Google Fonts

新版 WordPress 的預設佈景主體 (Theme) 出於隱私考量，將不會使用 Google Fonts：「Google Fonts are included locally in bundled themes」。

這邊講的是年份系列的 Theme，從 Twenty Twelve (2012) 到 Twenty Seventeen (2017)：

再更後新的版本，首先是沒有 Twelve Eighteen (2018) (可以從「Themes by WordPress.org | WordPress.org」這邊翻)，而從 Twelve Nineteen (2019) 後都沒有使用 Google Fonts 了，在 GitHub 上的 WordPress/twentynineteen 這邊可以 clone 下來確認：

$ git grep google    
classes/class-twentynineteen-svg-icons.php:         'google-plus' => array(
classes/class-twentynineteen-svg-icons.php:                 'plus.google.com',
classes/class-twentynineteen-svg-icons.php:         'google-plus' => '
classes/class-twentynineteen-svg-icons.php:         'google'      => '

官方還是有給繼續使用 Google Fonts 的方法，在「Continuing to use Google Fonts」這段有提到設定的方式。

德國的地方法院說使用 Google Fonts 服務沒有告知使用者違反 GDPR

看到「German Court Rules Websites Embedding Google Fonts Violates GDPR」這篇，雖然不是最終判決，但總是個開始：

A regional court in the German city of Munich has ordered a website operator to pay €100 in damages for transferring a user's personal data — i.e., IP address — to Google via the search giant's Fonts library without the individual's consent.

因為 GDPR 內把 IP address 資訊視為 PII，所以看起來任何 3rd-party 的內嵌服務應該都會受到影響，來追起來看一下後續的發展好了...

另外一個 monospace 的字型 Hera

Lobsters Daily 上看到的字型 Hera。

以 Source Code Pro 為主，混入了 Fira Mono、Inconsolata 與 IBM Plex Mono：

Hera is a monospace font which is a customised version of Source Code Pro which was originally created by Paul Hunt.

Hera consists mainly of glyphs from Adobe Source Code Pro mixed with glyphs from popular monospace fonts like Fira Mono, Inconsolata, IBM Plex Mono, etc.

Hera emphasises readability and uniformity for sigils and symbols which makes it suitable for use in coding environments.

GitHub 上有 screenshot 可以參考：

以及：

用了幾天還可以，應該會繼續用，放入常態性的替換清單... (我同一個字型看久了會想換)

新世紀福音戰士的字型

沒想到在 Hacker News 首頁上看到第一名居然是這個連結：

2019 年的文章：「Neon Genesis Evangelion」，找資料的時候發現有簡體中文版的翻譯：「末世感叩击：《新世纪福音战士》的文字世界」。

這些字型是由日本的 Fontworks 所開發出來的 Matisse EB，在片尾的 credit 也可以看到「株式会社フォントワークスジャパン」：

主要是沒想到會在 Hacker News 首頁上的第一名看到這個...

挑選開發者用的 Monospace 字型

Hacker News Daily 上看到的網站，直接使用對應的字型，讓使用者可以直接感覺：「Dev Fonts」。

目前上面有 33 種字型，大多都是免費的 (目前上面只有看到 Dank Mono 是收費的字型)。

在頁面上可以換 theme，以及選擇不同程式語言的 syntax highlighter，另外下方範例的程式碼也可以自己修改，這些都是讓使用者模擬實際的感受。

Google Fonts 的加速方式

這邊講的是透過 css (以及 js) 使用的 Google Fonts，作者想要改善這塊，加速網頁的速度：「Should you self-host Google Fonts?」。

作者第一個提到的技巧是個懶人技巧，只要加上 preconnect 預先把 HTTPS 連線建好，就可以提昇不少速度。因為這可以降低先取得 css 後才建立連線的速度差異：

<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">

作者有提到 Google 在 css 檔案的
header 裡面本來就有加上 preconnect，但從前後比較可以看出，整個網頁的結束時間差了一秒 (這是作者在 Google Chrome 的 3G Slow 設定下模擬的)：

另外一個技巧是增加 swap，讓 Google Fonts 還沒有讀進來之前先用系統有的字型呈現。這樣不會出現整頁只有圖，然後突然字都冒出來的情況，也就是把一般在用的：

<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

加上 &display=swap：

<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">

最後一招就是把字型放在自己家，差異就更大了：

另外一個好處是改善 privacy，不過好像沒特別提到...

90 年代的網站...

前天看到的「Only 90s Web Developers Remember This」文章裡面在懷舊 (?)：

  • 1x1.gif
  • &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  • Dotted underlines, border effects
  • DHTML
  • Pixel fonts
  • Buttons

然後在 Facebook 上看到 zonble 貼的：「DHTMLConf」，太讚了 XDDD

讓人懷念的東西... XDDD