dokuwiki:web-font

  • fontface plugin 看來方便,但似乎不太靈活
    • 20171106 昨夜看了一下手動宣告 CSS @font-face 的方法,考慮到主站和 animal 間可能會有路徑的差異 ∴還是先來試用一下 fontface plugin,看它能否克服 animal 相對路徑的問題
      1. 先上傳一套 Georgia 字型檔1),再設定一個 DW-Georgia 字型 → 用 Android 手機瀏覽主站測試
        • Chrome for Android 好像看不出效果,不知道是不是得清 cache(手機怎麼清啊 XD
          → 換了巧皇后的手機來看,好像還是沒效果?
          • 好像發現 Chrome for Android 的 bug……?css - @font-face not working on Chrome for Android - Stack Overflow
          • 會是因為我設定字型名稱「DW-Georgia」中間有 hyphen,Chrome for Android 不喜歡嗎?
            20171108 改為「DWGeorgia」了還是不行。死 Chrome!<<怒>>
          • 20171108 這邊 FIXED! font-face rendering incorrectly in Chrome 的方法也不行
          • 20171109W3C School 這頁上只宣告 woff 是可以的 :o Tryit Editor v3.5
            → 試試只宣告 woff:
            1. 初步試,不行 :((特地拿巧皇后的手機測試也是如此)
            2. 進一步把 format('woff') 也拿掉:也不行 :(
          • 應該不是我的 url 設錯吧……看了一下,fontface plugin 也是把 url 設為 /lib/plugins/fontface/fonts/… 啊……
          • 把 fontface plugin 的 action.php 改成只宣告 woff 看看 → 不行
            • 只宣告 ttf → 也不行 <<怒>> 今天不試了啦!
          • 停用 fontface plugin 後用 userstyle 設定,而且把字型直接放到 /dw2),也是不行 <<怒>>
          • 20180318 今天有看到 css - @Font-face not working on IOS - Stack Overflow 說要用類似 ./xxxx.ttf 這樣的路徑(前面要加 ./),但試了也還是不行
        • Firefox for Android 有看到效果了~Georgia 充分支援 diacritic marks,字型又優美,就是讚
          • 而且上面測試 Chrome for Android 的方法,無論 Chrome 怎樣失敗,Firefox 好像都可以
          • 20180318 今天發現 Firefox for Android 的 Georgia,顯示 diacritic marks 時只能顯示一個,超過一個,像「ę̌」,就不正常,不像在 Mac 上一樣可以正確顯示 :(
            cf. Chrome for Android,雖然不是用 Georgia,但顯示 diacritic marks 起來卻是正常的。Android 版 Firefox 和 Chrome 各有各的問題,【結論】這些該死的瀏覽器都很 buggy!<<怒>>
  • 暫不考慮 Google Font
    • 20171108 為了確認怎樣的宣告效果可以呈現在 Chrome for Android,所以改為設定 Google Font
      • 第一字型設 Lora,用在 h2 → 主站 MBA Firefox ✔ ghsrobert.tk 手機 Chrome ✔ :D
      • 第二字型設 Montserrat,用在 body → 主站 MBA Firefox ✔ ghsrobert.tk 手機 Chrome ✔ :D
      • 所以似乎是我設定字型名稱有誤?
      • 啊,但也可能是 Chrome for Android 支援 Google Font 較佳 → 試過 uploaded font 以後 Chrome 還是不行,所以不是字型名稱問題,是 Chrome 載入 uploaded font 有問題!
  • 若自行用 CSS 單純宣告 @font-face?

20201003 這幾年來 justfont 就是字的 on demand Web font 解決方案蠻吸引人的,昨夜就來試試看可否用在 DW 上。

  1. 上 justfont 網站,先以免費會員身分設定字型、CSS class 後獲得 JavaScript 連結
  2. 把連結放到 template main.php 的 <head> 中
  3. MBA localhost 上已經出現了 JavaScript 連結,但似乎還沒同步到 NAS 上……一直到今晨也是,等等等……
  4. 而且,justfont 說是有預設支援 localhost 的,但效果也沒出現,令我懷疑是否因為我的免費會員用量早已在 2013 年用完……
    〔未完待續〕

20210817 看到這篇,除了提到 justfont 外,也介紹了文鼎。呈現魔鬼般細節!怎麼去幫網站換字體?繁體中文 Webfont 網頁字型推薦 | by 林育正 Riven | RAR 設計攻略 | Medium

但是去 https://ifontcloud.com/index/font.jsp 上面,自訂預覽文字,我輸入了最近打算分享「斯卡羅」電視劇客語台詞時,會需要用到的幾個客語漢字:「𠊎、𢯭、𫣆」,卻發現它的網頁通通都用到我本機的字型來 fall back 啦,那這樣我怎麼判斷得出來他們的字型支不支援這些擴充漢字呢?FIXME(已發信詢問)


1)
https://onlinefontconverter.com/ 真的超好用!幫你轉好檔,所有 web font 常用格式都有,還附完整正確的 CSS 設定檔!
2)
順便發現 DW 能夠依主站或 animal 解析出正確的字型路徑?
輸入您的意見. 允許使用維基語法:
S N V W H
 
  • 上一次變更: 2021/08/17 13:45
  • ghsrobert