在 CSS 裡面使用系統字型的選擇
source link: https://blog.gslin.org/archives/2023/03/17/11103/%e5%9c%a8-css-%e8%a3%a1%e9%9d%a2%e4%bd%bf%e7%94%a8%e7%b3%bb%e7%b5%b1%e5%ad%97%e5%9e%8b%e7%9a%84%e9%81%b8%e6%93%87/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
在 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 來說會多一些變化可以用。
Related
fontconfig fallback 機制與 CSS font-family fallback 機制的衝突...
自己搞不定，加上需要有圖才比較好理解，所以發篇文章問看看... 起因是在 Twitter 上發現某篇文章的截圖，在我的機器上顯示是 sans-serif 類的字型，而對方顯示的是 serif (看起來像是 Mac 的機器上)： 而翻了網站本身的 CSS 設定，發現是設成 serif，所以表示我這邊的設定有問題... 找了些資料並且測試，發現是 Linux 上 fontconfig 所設計的 fallback 機制跟一般人認知的不一樣，使得 CSS font-family fallback 機制直接失效... 在那篇文章的 font-family 設定是「medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif」，所以你會假設 medium-content-serif-font (這是 Medium 設定的 web fonts) 內沒有的字型會去 Georgia 找，然後依序是 Cambria、Times New Roman 與 Times，最後到 serif。 但在 Linux 下的 fontconfig 的設計則跟這點衝突。當你丟…
March 28, 2018In "Computer"
Google Fonts 的加速方式
這邊講的是透過 css (以及 js) 使用的 Google Fonts，作者想要改善這塊，加速網頁的速度：「Should you self-host Google Fonts?」。 作者第一個提到的技巧是個懶人技巧，只要加上 preconnect 預先把 HTTPS 連線建好，就可以提昇不少速度。因為這可以降低先取得 css 後才建立連線的速度差異： 作者有提到 Google 在 css 檔案的 header 裡面本來就有加上 preconnect，但從前後比較可以看出，整個網頁的結束時間差了一秒 (這是作者在 Google Chrome 的 3G Slow 設定下模擬的)： 另外一個技巧是增加 swap，讓 Google Fonts 還沒有讀進來之前先用系統有的字型呈現。這樣不會出現整頁只有圖，然後突然字都冒出來的情況，也就是把一般在用的：
February 23, 2020In "CDN"
利用字型來判斷使用者是否有安裝特定軟體
在 Hacker News 上的「TeamViewer installs suspicious font only useful for web fingerprinting (ctrl.blog)」這邊看到的技巧，原文在「TeamViewer installs suspicious font only useful for web fingerprinting」這邊，但文章標題本身可以忽略。 這別提到的方法是，在安裝軟體時額外安裝一個特別的字型，然後網頁就可以透過 javascript 判斷這個字型存不存在，來得知使用者是否有安裝自己的軟體，接下來就可以走到不同的 flow：可以導引使用者下載軟體，或是透過 handler 拉起應用程式。 不過這也透漏出了隱私問題，代表廣告商可以利用這點取得 fingerprint，而不只是軟體自家的網站。 看討論串裡面說 Firefox 上可以用 privacy.resistFingerprinting 擋住：「Firefox's protection against fingerprinting」，但 Firefox 本身也沒有說明的太清楚到底會放行哪些字型： Not all fonts installed on your computer are available to webpages…
July 23, 2022In "Browser"
Leave a Reply
Your email address will not be published. Required fields are marked *
Comment *
Name *
Email *
Website
Notify me of follow-up comments by email.
Notify me of new posts by email.
To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)
Post navigation
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK