dokuwiki:web-font

差異處

這裏顯示兩個版本的差異處。

連向這個比對檢視

Both sides previous revision 前次修改
下次修改
前次修改
dokuwiki:web-font [2017/11/09 04:35]
ghsrobert 多方嘗試仍都不行,死 Chrome
dokuwiki:web-font [2021/08/17 13:45] (目前版本)
ghsrobert 文鼎雲字庫支援擴充漢字狀況不明
行 8: 行 8:
           * 好像發現 Chrome for Android 的 bug……?[[https://stackoverflow.com/questions/21841250/font-face-not-working-on-chrome-for-android|css - @font-face not working on Chrome for Android - Stack Overflow]]           * 好像發現 Chrome for Android 的 bug……?[[https://stackoverflow.com/questions/21841250/font-face-not-working-on-chrome-for-android|css - @font-face not working on Chrome for Android - Stack Overflow]]
             * 這串講很多 Chrome 不行或 Firefox 不行時的解法,讓人頭昏眼花:[[https://recalll.co/app/?q=css%20-%20@font-face%20Not%20Working%20in%20Chrome%20for%20Android|css - @font-face Not Working in Chrome for Android - Recalll]]             * 這串講很多 Chrome 不行或 Firefox 不行時的解法,讓人頭昏眼花:[[https://recalll.co/app/?q=css%20-%20@font-face%20Not%20Working%20in%20Chrome%20for%20Android|css - @font-face Not Working in Chrome for Android - Recalll]]
-            * 會是因為我設定字型名稱「DW-Georgia」中間有 hyphen,Chrome for Android 不喜歡嗎?\\ /^20171108^/ 改為「DWGeorgia」了還是不行。死 Chrome!<<怒>> +          * 會是因為我設定字型名稱「DW-Georgia」中間有 hyphen,Chrome for Android 不喜歡嗎?\\ /^20171108^/ 改為「DWGeorgia」了還是不行。死 Chrome!<<怒>> 
-            * /^20171108^/ 這邊 [[https://www.adtrak.co.uk/blog/font-face-chrome-rendering/|FIXED! font-face rendering incorrectly in Chrome]] 的方法也不行 +          * /^20171108^/ 這邊 [[https://www.adtrak.co.uk/blog/font-face-chrome-rendering/|FIXED! font-face rendering incorrectly in Chrome]] 的方法也不行 
-            * /^20171109^/ 但 W3C School 這頁上只宣告 woff 是可以的 :o [[https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_font-face_rule|Tryit Editor v3.5]]\\ → 試試只宣告 woff:+          * /^20171109^/ 但 W3C School 這頁上只宣告 woff 是可以的 :o [[https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_font-face_rule|Tryit Editor v3.5]]\\ → 試試只宣告 woff:
               - 初步試,不行 :((特地拿巧皇后的手機測試也是如此)               - 初步試,不行 :((特地拿巧皇后的手機測試也是如此)
               - 進一步把 ''format('woff')'' 也拿掉:也不行 :(               - 進一步把 ''format('woff')'' 也拿掉:也不行 :(
-            * 應該不是我的 url 設錯吧……看了一下,fontface plugin 也是把 url 設為 ''/lib/plugins/fontface/fonts/...'' 啊…… +          * 應該不是我的 url 設錯吧……看了一下,fontface plugin 也是把 url 設為 ''/lib/plugins/fontface/fonts/...'' 啊…… 
-            * 把 fontface plugin 的 action.php 改成只宣告 woff 看看 → 不行 +          * 把 fontface plugin 的 action.php 改成只宣告 woff 看看 → 不行 
-              * 只宣告 ttf → 也不行 <<怒>> 今天不試了啦!+            * 只宣告 ttf → 也不行 <<怒>> 今天不試了啦! 
 +          * 停用 fontface plugin 後用 userstyle 設定,而且把字型直接放到 ''/dw'' 下((順便發現 DW 能夠依主站或 animal 解析出正確的字型路徑?)),也是不行 <<怒>> 
 +          * /^20180318^/ 今天有看到 [[https://stackoverflow.com/questions/27158639/font-face-not-working-on-ios|css - @Font-face not working on IOS - Stack Overflow]] 說要用類似 ''./xxxx.ttf'' 這樣的路徑(前面要加 ''./''),但試了也還是不行
         * Firefox for Android 有看到效果了~Georgia 充分支援 diacritic marks,字型又優美,就是讚         * Firefox for Android 有看到效果了~Georgia 充分支援 diacritic marks,字型又優美,就是讚
           * 而且上面測試 Chrome for Android 的方法,無論 Chrome 怎樣失敗,Firefox 好像都可以           * 而且上面測試 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   * 暫不考慮 Google Font
     * /^20171108^/ 為了確認怎樣的宣告效果可以呈現在 Chrome for Android,所以改為設定 Google Font     * /^20171108^/ 為了確認怎樣的宣告效果可以呈現在 Chrome for Android,所以改為設定 Google Font
行 27: 行 30:
     * [[http://www.oxxostudio.tw/articles/201406/css-web-font.html|Web Font 的使用 - OXXO.STUDIO]]     * [[http://www.oxxostudio.tw/articles/201406/css-web-font.html|Web Font 的使用 - OXXO.STUDIO]]
     * [[https://blog.gtwang.org/web-development/css-font-face/|CSS 網頁字型 @font-face 使用教學與範例 - G. T. Wang]]     * [[https://blog.gtwang.org/web-development/css-font-face/|CSS 網頁字型 @font-face 使用教學與範例 - G. T. Wang]]
 +
 +===== justfont =====
 +/^20201003^/ 這幾年來 [[https://www.justfont.com/|justfont 就是字]]的 on demand Web font 解決方案蠻吸引人的,昨夜就來試試看可否用在 DW 上。
 +
 +  - 上 justfont 網站,先以免費會員身分設定字型、CSS class 後獲得 JavaScript 連結
 +  - 把連結放到 template main.php 的 <head>
 +  - MBA localhost 上已經出現了 JavaScript 連結,但似乎還沒同步到 NAS 上……一直到今晨也是,等等等……
 +  - 而且,justfont 說是有預設支援 localhost 的,但效果也沒出現,令我懷疑是否因為我的免費會員用量早已在 2013 年用完……\\ 〔未完待續〕
 +
 +===== 文鼎雲字庫 =====
 +/^20210817^/ 看到這篇,除了提到 justfont 外,也介紹了文鼎。[[https://medium.com/rar-design/呈現魔鬼般細節-怎麼去幫網站換字體-台灣中文-webfont-網頁字型推薦-954c60bc46a9|呈現魔鬼般細節!怎麼去幫網站換字體?繁體中文 Webfont 網頁字型推薦 | by 林育正 Riven | RAR 設計攻略 | Medium]]
 +
 +但是去 https://ifontcloud.com/index/font.jsp 上面,自訂預覽文字,我輸入了最近打算分享「斯卡羅」電視劇客語台詞時,會需要用到的幾個客語漢字:「𠊎、𢯭、𫣆」,卻發現它的網頁通通都用到我本機的字型來 fall back 啦,那這樣我怎麼判斷得出來他們的字型支不支援這些擴充漢字呢?FIXME(已發信詢問)
  • 上一次變更: 2017/11/09 04:35
  • ghsrobert