要改的地方太多了，那就改天吧

目前正在瀏覽文章標籤：webfont

實測 Cloudflare Fonts 能讓網頁的雲端字型載入速度變得多快?

看到知名的網路佛堂 Cloudflare 在 2023/9 底推出了新服務Cloudflare Fonts: enhancing website font privacy and speed，現在許多網頁為了顯示漂亮好看、並且能被搜尋引擎輕易檢索的文字，常常都會掛上一些 webfont 服務，而免費的 Google Fonts 是目前市占率最高的服務之一。Cloudflare 特別做了一個服務，來解決網站使用 Google Fonts 當 webfont 的兩大痛點:Cloudflare Fonts網頁中有額外的字體檔案，為網頁載入帶來延遲Google...

繼續閱讀

網頁設計軟體產品體驗

#cloudflare#css#webfont

輸入注音常常忘記切換中英文嗎? 試試神奇的華碩智慧輸入(不是華碩品牌電腦也能用)

都西元 202 幾年了? 還有人在做電腦 Windows 系統的注音輸入法嗎?還真的有! 就是華碩…現在輸入文字的方式非常多元，語音輸入、手寫輸入轉純文字，華碩這個新出的智慧輸入法，還是要乖乖敲按鍵打字，解決了什麼使用者痛點?最大的特點就是可以自動辨識輸入的是中文還是英文，解決了有時候使用者打字沒看螢幕，打出一堆xj04fu 18 yl 2k7j;4ru4fu, cj04gj bj4z832k7jp6y4….在前幾年 Hacker News 有一個討論串 The password “ji32k7au4a...

繼續閱讀

軟體產品體驗

#mac#webfont

Google Fonts 遭指用免費字型追蹤使用者? 研究各家 web font 的實作方式和隱私條款

我的中文Web Font 踩雷記事本已經多年沒更新了，想不到今天又遇上新題材。大致就是吃飯滑手機時看到一篇報導 繞過 Cookie 限制！Google 遭指用免費字型追蹤使用者，除了 INSIDE 之外，國內幾家科技媒體如 Cool3C 之類的都有刊出。內容大致是引用外媒的報導，宣稱 Google 透過提供特定免費字型讓使用者下載安裝，藉此追蹤使用者藉由裝置上網時的瀏覽行為云云，使用者可以採取自保的手段就是使用瀏覽器的內建功能或額外安裝擴充套件...

繼續閱讀

數位行銷科技看新聞會與事實脫節科技新聞解析網頁設計

#adobe#css#google#webfont

用 FontForge 做 tree-shaking 減少網頁字型檔案大小

一個網頁使用了某個特殊字體，為了 SEO 和 RWD 排版斷行等原因，沒有直接通通做成圖片。但是網頁載入時因為會跑一個 10幾MB 的字型檔，雖然主機不是用我的，流量費用不是我付，但網頁開啟耗時畢竟比較久，也比較耗使用者的流量，所以嘗試把字型檔壓小。頁面的文字都是固定的，不是會從後台上稿或動態產生的那種，所以可以用 FontForge 或 FontSpider，那種把字型檔裡面沒用到的字移除的技術，一般稱為 remove unused glyphs，但在...

繼續閱讀

網頁設計軟體產品體驗

#pagespeed#webfont

近期常見的11種平面設計中文字型

設計美學是用錢堆起來的，看得見的名片、廣告傳單、宣傳海報、商品包裝，還有摸不著的電商 banner、網拍商品說明、社群網站貼文配圖、Youtube 影片內的影像，裡面出現的任何一個圖像元素、字體，還有文案、主題策略，都不會憑空生出來。除了用圖像傳達訊息，選用的字型也是影響整體設計風格的重要美感要素之一。除了最好買、大家看到膩的華康字型，一些小型設計模板 app 的字型像是下筆| 質感繁中文編輯、黃油相機、vivisticker 裡...

繼續閱讀

網頁設計視覺設計

#free#webfont

三小招提升網頁 PageSpeed 分數，優化網頁開啟速度與 Web Vitals 指標

有在追蹤使用者體驗的各種心理學研究，應該都有聽過網頁開啟速度的 X 秒原則，從西元二零零幾年到現在，在各種文獻都有不同的 X 數值，總之網頁開啟速度盡量越快越好。Google 也說過載入速度會當作SEO排名因素之一(Official Google Webmaster Central Blog: Using page speed in mobile search ranking)，網站好不容易導流得到曝光，內容好不好先不論，卻敗在開啟速度，有點可惜，所以花時間調校，對於網站經營還是能有一丁點幫助...

繼續閱讀

網頁設計

#cloudflare#google#js#pagespeed#RWD#SEO#webfont

思源黑體設計稿字體樣式與CSS font-weight 對照

有時候要照別人的設計稿按圖施工，在 Adobe 的軟體裡面，思源黑體的字體樣式是用 Light, Black, Medium…而網頁的 css font-weight 並無這些東西，打 font-weight:black 是顯示不出來的。版本比較新的 Adobe illustrator 有一個產生 CSS 的工具，外行人的想法就是以為導入一個工具之後就可以解決所有問題，但是有常識的人都知道這種「自動轉換」的東西通常有三大特點，一：很雷，二：超雷，三：雷到爆。以本例來說，需要知道 ai 檔...

繼續閱讀

網頁設計視覺設計

#webfont

中文 Web Font 踩雷記事本

網頁使用 Web Font (雲端字型) 看似能解決以下問題，– 工程師不用再跟設計師解釋，為什麼網頁上的字型跟設計稿長的不一樣?– 解決客戶需求「這邊可以用比較活潑的字體嗎?」– 讓 Windows 的網頁文字不再只是黑體/明體/標楷體套餐?– 讓跨瀏覽器都能顯示相同字型?– 網頁編輯人員不用再把特別的字型都做成圖片?– 讓文字可以有好看的字體，同時也可以被選取、複製、翻譯、向量縮放、被搜尋引擎索引。– 用其他亞洲語系的系統字型來顯示黑...

繼續閱讀

網頁設計軟體產品體驗

#webfont

網頁的平面設計稿 要注意哪些事?

常常被團隊的工程師說你的平面設計稿無法做成網頁? 設計師和工程師常常吵架?一個要做成網頁的平面設計稿有哪些要注意的呢? 請看此文的概略介紹。上面有一個 ppt，如果看不到 ppt 請點網頁的平面設計稿要注意哪些事? // Speaker Deck。內容摘要:一、請使用 RGB 色彩模式1.色彩模式: 不管原始稿件是什麼，通通要轉成 RGB2.網頁色彩表示法:– 規範的英文名稱(如 Green, Lime)– HEX 16 進位 (如#000000)– RGB/RGBA (如rgba(255,255,255,...

繼續閱讀

使用者介面網頁設計視覺設計

#RWD#UI#ux#webfont

網頁字體的一些事

一、Web Fonts(雲端字型技術) 客人說她的網頁上要用娃娃體，除了做成圖片，還有其他選擇嗎?為了確保使用者在不同瀏覽環境也能看到同樣的字體，一般只能使用系統內建字體，如 Windows 系統的正黑體、細明體、標楷體。如有特殊需求，最穩定的方法通常只能做成圖片或 Flash，但除了網頁載入的負荷與日後維護的成本，也降低了網頁內容被搜尋引擎索引的程度，而且當圖片在高解析裝置上，或是需要放大時，上面的字也模糊不清了。網路字...

繼續閱讀

網頁設計

#14px#bootstrap#iconfont#webfont

近期熱門 Hot Posts

最新發布 New Posts
    ✏️

    Contact Me

    E-Mail

    Open Email Client

    LINE 私訊
    此為 LINE 官方帳號，僅用於連絡，不會群發訊息

    加 LINE 好友

    FB Messenger/Instagram 私訊

    FB Messenger IG 小盒子

    Telegram 私訊

    傳訊息到 Telegram