不用買字型,用 CSS 做出專業的縷空文字+外框
![不用買字型,用 CSS 做出專業的縷空文字+外框](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisuczgebLNpeD_Qdmg5MHA2MVhofcPD4J6Ud_hkalQySFiNAnsdHi2gBuf5HqsHU6dnOUgoi6DqrBFPNKFsthAbW-nwrqQgM-ooNVAEUHAn7nZWvwnsS3UyipC_uuY8xHsec3HTm3y1RgLPdffbNlTECkW4Ejbwuwscxlg_ppDQJmjIVjFYZ80PXNuKQ/s1600/css-text-stroke.jpg=s0-rw)
最近接到一個需求,製作醫學疾病風險自我檢測頁面,客戶提供的設計圖質感不錯,只不過有設計感的畫面在製作 RWD 效果時,難度會提高很多。 其中一個部分需要使用高超的 CSS 技巧「縷空文字+外框」,這樣的效果無法用簡單的 CSS 語法做出來,原設計圖版面如下(紅框標示的部分...
繼續閱讀全文網頁安裝思源宋體﹍CSS 最佳化實作 + 展示頁面
![網頁安裝思源宋體﹍CSS 最佳化實作 + 展示頁面](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmI64K-AYVukhq5CgAslcYf9fCbrY1qjb72InLUVJfvQeVyFXuBBdK_1e_paMc_hMitLa2Go_ZTc7j1sBtq045qwS-pRr8SMQyxOwUi_CM0zoC7MUMIlJpRPPFTLbxWoopS8aLI4MFkvDP/s1600/noto-serif-tc-css-optimize.jpg)
上一篇「 網頁安裝思源黑體﹍載入速度最佳化實作 」已說明了 Google Fonts 的中文字型處理技術原理,本篇直接說明如何安裝「思源宋體」。 最佳化的要點為: 手動拆解官方 CSS 檔內容,逐一加入 font-display: swap 參數 把所有 CSS 內容塞...
繼續閱讀全文網頁安裝思源黑體﹍CSS 最佳化實作 + 展示頁面
![網頁安裝思源黑體﹍CSS 最佳化實作 + 展示頁面](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlv29UYS5Ew-pscr5U8QbAXTy1YDrLFsBUkt4CkJJKVFbwVzrgU45JWvG_dZwRSAz_l1lEJQ2s8bfJAmbbY74wFho8BjkMhIRxhdUtzlmrUI7pMMAsde8adqgNwUfUyvKDnNaDZwniRxtB/s1600/noto-sans-tc-css-optimize.jpg)
前陣子與朋友討論網頁安裝「思源黑體」的效果,有強者大大告知現在載入字型檔時,會拆成上百個小檔案。研究後發現這真是 Google Font 技術上的一大進步,「思源黑體」也正式成為我的選項之一。 以我個人的看法,微軟正黑體作為網頁內文主要字型的話稍微偏細,思源黑體視覺效果比較適...
繼續閱讀全文網頁是否安裝思源黑體、中文字型的考量﹍影響載入速度的因素及作法分析
![網頁是否安裝思源黑體、中文字型的考量﹍影響載入速度的因素及作法分析](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNRWVQM_dygQkKOuLfjwI7mudBtDCqkLAz8SGMcTHyFD0lYb2R3ahG8VsbTYZRyA7MjL9n7cDhBKBx_Fk0UPe53JKJPXMwIEewNBxbCSlQEoYv16HgBNpKkWp217Zia5t3_QNDcL-o3J1/s1600/noto-sans-serif-traditional-chinese-web-font.jpg)
過去在「 網頁中文字型除了微軟正黑體, 還有這些好選擇! 」曾提過,網頁若使用「作業系統」以外的字體,由於中文字型檔案太大,會影響網頁載入速度。 後來 Google Fonts 免費讓「 讓思源黑體可直接外連 」,使用 Google 的 CDN 伺服器肯定比自己找網頁空間的連...
繼續閱讀全文如何使用 CDN 免費網頁字型﹍簡單快速沒有侵權麻煩
![如何使用 CDN 免費網頁字型﹍簡單快速沒有侵權麻煩](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTjRBc318vltgI91JRzf2Ew55w_nRiJqMb1IJuMUPD_0R1MpuAENziUAnuxVfsUeNJx0n2XsTVrTJycYsCnrn1CbzxAHe9qg1ksV2hke-MoRZP8TUvp5H8Dcs_6GNLyyD75GbXl2MRoSav/s1600/free-web-font-cdn.jpg)
有遇過幾次客戶要求網站使用特定的字型,看起來這樣的要求似乎不是太困難,然而實際上,客戶多半對「網頁字型」沒什麼概念,以為 Windows 下某軟體有看過某字型,就可以在網頁上使用。 網頁字型的使用,不是一件輕鬆的事,需要瞭解的概念大致有這些: 不是自己的電腦可看到某字型,...
繼續閱讀全文Font Awesome 5 正式支援 Line 圖示﹍CDN 安裝 + 版本向下相容心得
![Font Awesome 5 正式支援 Line 圖示﹍CDN 安裝 + 版本向下相容心得](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy4V9ajhwyFdYCdxI7lAMQaHEAEdaEW4QeuGbBzUcQla2DFo-VuONKUsRzxRTCta7lbJ5_5Svep-5KbmVdQiv2JbklfQBRVuC5bPzOxm8dF4EjLuDM4d01tLqgIS2MlvNzEtMIyLDq2QGX/s1600/font-awesome-5-compatible-lower-version.jpg)
長久以來使用「 Font Awesome 」真的非常方便,網頁製作各種小圖示時不用再煩惱,只要到「 Font Awesome 圖示速查表 」翻一翻多能找到需要的圖案。 不過幫客戶處理需求時,最常遇到找不到「Line」的圖案,只好建議先用相近的「Whatsapp」擋著用。沒辦法...
繼續閱讀全文Emoji 表情符號輸入小幫手 (書籤工具)
![Emoji 表情符號輸入小幫手 (書籤工具)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqwhC46R4zuTrC-NhVdfEEQJzPFsjS94qIkJdqGpK4fAPimUzYWq7wF4ErygKAo58MkpAeq8_RyM51b9xDQ9djS-7AXXRG94YDdo-r6npl_yWqJxNKNFCAj7tFlAzNCfYuHZO6jCLmFSHH/s640/emoji-unicode-input-helper-bookmark.jpg)
前陣子有讀者留言時使用 Unicode 表情符號,覺得效果還不錯,語意看起來活潑許多,因此決定動手做個表情符號的輸入工具。 其實這類的留言輔助工具,在網路上已經可以找到一些,而寫部落格的初期,也曾思考過是否安裝這類的外掛。但這畢竟算是使用率較低的工具,如果為了花俏的功能而拖慢...
繼續閱讀全文Emoji 表情符號輸入小幫手 (網頁版)
![Emoji 表情符號輸入小幫手 (網頁版)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirQOIHfuESJItWsC4d4DQelGhKEDQlcusEQSwUhpxNjlNTCu6UtUbEE19Vk14vF1D21qhKybIZz82d8Tz3dvAFHTPCD7JUW4mkLdLpcguqAGVIBSyYq_C9JnP_AL6BAJSn5B6Z_0pV4b8Y/s1600/emoji-unicode-input-helper.jpg)
這個「表情符號輸入工具」可以快速找到各種需要的 Unicode 表情圖案,方便留言、寫文章或是即時通使用。 所有圖案都是特別篩選過,可以在各種平台正常顯示。同時操作很簡單,後面會有詳細介紹。
繼續閱讀全文為 UL LI 項目清單輕鬆加入圖示的各種 CSS 技巧﹍使用 Unicode + Font Awesome 字型
![為 UL LI 項目清單輕鬆加入圖示的各種 CSS 技巧﹍使用 Unicode + Font Awesome 字型](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpLDwi_ffCjibZTHkdojUVfcC0vpva-OvCqNn1Cf6EJhiIA4vpL3WjLVTygYk0dv8eOExrP3ZwFhvbZ1UFsho-_4KOFmjQn6Fc9exM0W9x_uoS0LULDlTNNQHsvzUSCGNh17TDuzbLJ6P-/s1600/list-image.jpg)
前陣子接到一個需求,希望在所有 UL LI 項目(列表)清單之前,插入一個小圖示。而且這個圖示,需要將來可以很方便地自行替換。 假如網頁的 UL LI 項目早已做好,那麼一個個手動加入 IMG 標籤的圖片,不但很麻煩,日後也不方便維護(更換圖示)。 其實這件事使用 CSS...
繼續閱讀全文使用 Font Awesome 圖示速查表(cheat sheet), 安裝快速不麻煩
![使用 Font Awesome 圖示速查表(cheat sheet), 安裝快速不麻煩](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-xbi1VjVxu7199jU6zIrRCRiVyXbGdIsm11hyrovfTdXu6ha4iiNeMAi3wPzIWEJpvy2ZQn0qnk7BEv8I9WB7VDFhIrH4AWzn7VwqrWNCaHL0KU2D-ipzqF3GtYgSWLvxC3FKN15Smsvr/s640/font-awesome-cheat-sheet.jpg)
最近使用「 Font Awesome 」替換了網站各處所有的小圖示,包含「 社群分享按鈕 」、各式側邊欄及網頁底部圖示。由於官網並未提供方便的安裝語法查詢管道,導致必須一一點開個別圖示的頁面來複製語法,因而浪費不少時間。 於是整理了本篇的 Font Awesome 圖示一覽表...
繼續閱讀全文安裝常用社群分享按鈕 (圓形)﹍圖示字型 Font Awesome 應用
![安裝常用社群分享按鈕 (圓形)﹍圖示字型 Font Awesome 應用](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMZqhpEbYvFsjpbv_ingn6wunDPpv0Nr9H7TzUSPopeBKg0Q7SPaz3GV70l97779EL4jSAnrG3qKN17r6JlYaJoeHumPrOvA01IDaAaSnK4DkaPQ_kbkhWCOU29qFvOePNCaUKgDI3ByFF/s640/round-social-share-buttons.jpg)
上一篇「 圖示字型 Font Awesome 進階使用方式整理 」,說明了如何利用重疊圖示,來組合出一個 FB 分享按鈕。 只做出一個不過癮,本篇要示範如何利用 Font Awesome 圖示字型,繼續做出所有常見的社群分享按鈕,例如 G+、Line、微博、噗浪、推特、郵件等...
繼續閱讀全文圖示字型 Font Awesome 進階使用方式教學﹍製作社群分享按鈕
![圖示字型 Font Awesome 進階使用方式教學﹍製作社群分享按鈕](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKdJXgaiXZX7VE8rwaJz3VRI58VAU6fZR6ip5CBx942vRI0BzTjC9bw-4ZaXhZ_QQ8V9nuZbX-C70qiG6uyc1jfV2e576oyuZPuKMdkwNTOQ-usLckWD_dx7Qr-eYOxZ4OIcArdtrLpaA4/s640/font-awesome.jpg)
「 Font Awesome 」是一套把 "向量圖示" 做成字型的套件。過去為了減少網站小圖示的使用(加快網頁讀取速度),採用「 UNICODE 特殊符號 」這個方案。 而最近處理一些案子需要製作各式的 "社群分享按鈕",發現 &quo...
繼續閱讀全文讓網頁顯示特定中文字型﹍安裝實作教學
![讓網頁顯示特定中文字型﹍安裝實作教學](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCWRgOeid5QTlopMf6P7ZbA4_rQs55r85i7LS1SqpxGz4xN-OlA9Jh7OBv2ahIeyPqFt9JvanF4L2q6K-Br5LrpnRXXCzJtEXgzUyV3KcBys1QNNvtcuZJMs68J04kqRwn34iwZIietNNd/s640/chinese-custom-font.jpg)
在網站使用中文字型是個大問題,由於字型檔在現有的網路速度下,過長的傳輸時間讓我們不能隨心所欲使用喜歡的字型,也因為如此,只能遷就訪客作業系統現有的字型,例如「 網頁中文字型除了微軟正黑體, 還有這些好選擇! 」。 這篇「 使用 UNICODE 特殊符號取代網頁小圖示 」,使用...
繼續閱讀全文取代 ICON FONT 網頁小圖示的好選擇﹍UNICODE 特殊符號
![取代 ICON FONT 網頁小圖示的好選擇﹍UNICODE 特殊符號](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib2WhLOQMBZnsZFmQ3tXBJ2OUZVAiVw7Wwpiw-sl7Q0CCkNHuztKsclYf73BF8DUXUMY6dWD9kRCT-KUToIenGP3t1Td38sxqR3QEZJBJjiRSH7lOsDbCvFCZIIn4e5XnF5rw3eAlb2CW8/s640/unicode-food-icon.jpg)
你的網站是否也用了很多小圖示,例如 "首頁"、"留言對話泡泡"、"Email" 等等?這些圖檔雖然體積小,但每個檔案的載入都需要耗費一個 http 請求,是影響網頁載入速度的一個小原因。 最早為了解決這個問題,出現「...
繼續閱讀全文如何讓 Unicode 表情圖案 (特殊符號) 在網頁上正常顯示?
![如何讓 Unicode 表情圖案 (特殊符號) 在網頁上正常顯示?](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGiYYKfSc77QZOFXTCfvkjrRcDwhdxjtJB6KkPBmbzApXmxPdSlgrJNZDDoFzPZ5OOwOfUzuI2tWpZUOmy55s-fswJ1i39Uf_Bfd6mwABExYqOdGwZpZYaE0nIoyLjFNGd-9X0y18Kbw1W/s640/unicode-special-character-display-on-webpage.jpg)
上一篇「 Unicode 表情圖案(emoji ) + 特殊符號字元一覽表 」,展示了許多可以取代網站小圖示的 UNICODE,其優點非常顯而易見: 1. 字元的傳輸量遠低於圖片的傳輸量 2. 可以 減少許多小圖示的 http 請求量 相信對於在意網站效能的站長而言,以...
繼續閱讀全文Unicode 表情圖案(emoji ) + 特殊符號字元一覽表
![Unicode 表情圖案(emoji ) + 特殊符號字元一覽表](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDm2-xKYFUCfq952_KgLf2gnoq8-pMb-VozH9Iw9ZpNTp3GvtSrAtGlmHGGWbWot4b-NHAOzsKklcTeYy3loTjgUD5QsO7afEpftepaye-3vChwRuq2_ZkEo4giYvEABQP4y4I0ySV9Jdp/s1600/emoji-unicode-table.jpg)
網頁常常會用到一些小圖示,例如搜尋框、郵件圖示、留言對話泡泡等。最簡單的方法可以直接 Google 這些圖示、或是到素材網站尋找合適的圖案,不過最近發現「 Unicode 組織 」越做越強大,很多常用的圖示都已經可以在 Unicode 編碼中找到。 而且 Unicode 非常...
繼續閱讀全文網頁中文字型除了微軟正黑體, 還有這些好選擇!(windows)
![網頁中文字型除了微軟正黑體, 還有這些好選擇!(windows)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjloRDPLwQgfuyMm88xPE9biEh5GEHcvdG9NMqvdaY1iJ7oLOGHB0EpGLv_5piL3WnP0YOv20cMiJ0z9pgI6bHH7IvFZ3VWIJug2aWPqFBGKKuFNyvGsPLJLw7dSauNyG9aOGxyXJH2abME/s1600/windows-chinese-font-choice.jpg)
對於網頁能使用的中文字體,我們比較難有自訂的選擇。上一篇「 網頁中英文字型跨平台設定最佳化 」說明了,由於中文字型檔太大,網頁絕對不能引用外部中文字型檔,否則載入速度可以讓訪客好整以暇地泡好一杯咖啡,並跳離該頁面。 前陣子 Google 發布了免費的中文字型「 思源黑體 」,...
繼續閱讀全文網頁中英文字型(font-family)跨平台設定最佳化
![網頁中英文字型(font-family)跨平台設定最佳化](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYwfIrBsOY3nevpM_gHfTDbEDmF7U15Ohn61kszBwY3LCDSiUdbiicEW1GyZs8PCPSbwsKui10xayMnu5F3S4OS49Fcxq9h5_U_hU595GDJK_LBjj05lbwy2IEqdxjb0aGxRdCe0YTBqjW/s1600/font-family.jpg)
中文字體由於先天上的諸多限制,無法像英文字體般,在網頁上能有多樣性的呈現。若是想與眾不同,最簡單的方式是將特殊中文字型做成圖形(例如網站標題及敘述),不過缺點是不利於 SEO。 而不使用圖形也是有辦法來顯示自訂字型,可參考這篇「 自製中文網頁字形(Web Font)並內崁至網...
繼續閱讀全文