Try   HackMD

2020/03/04 Sass/Scss 教學筆記: 如何製作 iconFonts

綱要

註冊Fontastic

http://app.fontastic.me/

Fontastic是個線上圖示轉字體服務的網站,可以上傳自己製作的svg圖檔並管理集合。
也提供轉換成CSS樣式以前的命名模式編輯,打包下載時可以直接跟著範例網頁以class的方式或者data-attribute調用圖示。


關於製作 Font SVG 這檔事的坑

繪製icon的軟體,只要是能匯出svg格式的都可以,推薦Adobe Illustrator和Sketch等。
但要將icon轉換成字體,一定會有些固定的細節需要注意:

・必須是RGB純黑色#000000,且不能有遮色片
・必須對齊中心點以免日後發生需要額外寫 padding 的慘劇
・必須將所有外觀線條、字體轉外框,形狀也要合併為單一圖層整體色塊

假如不小心手殘或手賤亂調色票、沒轉外框、沒合併形狀,轉出SVG上傳到 Fontastic 就會發生這種恐怖的事情:

製作方式




下載之前可以在CUSTOMIZE編輯class name和使用data-attribute時的MAPPING字元,這邊推薦大家切換成PUA模式。

選擇PUBLISH後可以預覽一下class name和MAPPING:


下載解壓縮後會看見一份CSS檔和一個html、以及一個fonts目錄。

直接將CSS的內容複製到新的Scss檔,接下來我們就可以在網頁中使用它們:

@charset "UTF-8"; @font-face { font-family: "iconfonts"; src:url("fonts/iconfonts.eot"); src:url("fonts/iconfonts.eot?#iefix") format("embedded-opentype"), url("fonts/iconfonts.woff") format("woff"), url("fonts/iconfonts.ttf") format("truetype"), url("fonts/iconfonts.svg#iconfonts") format("svg"); font-weight: normal; font-style: normal; } [data-icon]:before { font-family: "iconfonts" !important; content: attr(data-icon); font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; /* speak是設置聲音輸出屬性,這邊其實不需要 */ speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^="app-"]:before, [class*=" app-"]:before { font-family: "iconfonts" !important; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 假如你增加了icon的數量,就必須重新再下載一次,而這裡的編號也會跟著異動 */ .icons-key:before { content: "\61"; } .icons-earphone:before { content: "\62"; } .icons-heart:before { content: "\63"; } .icons-dialogue:before { content: "\64"; } .icons-music:before { content: "\65"; } .icons-lock:before { content: "\66"; } .icons-node:before { content: "\67"; } .icons-piechart:before { content: "\68"; } .icons-search:before { content: "\69"; } .icons-speaker:before { content: "\6a"; } .icons-star:before { content: "\6b"; }
/* variable.scss */ /* 還可以替這些icon染色 */ $iconFontsColors: 'info', 'success', 'error', 'warning'; @mixin iconFontsColor($currentColor) { [class^="app-"]:before, [class*=" app-"]:before { @if $currentColor == 'info' { color: #0066FF; } @else if $currentColor == 'success' { color: #FFEE99; } @else if $currentColor == 'error' { color: #FF3333; } @else if $currentColor == 'warning' { color: #77FF00; } } } .tabs { .button { /* 調用時根據'info', 'success', 'error', 'warning' 帶出不同結果 */ @include iconFontsColor('info'); } }
/* 編譯後的CSS */ /* iconFontsColor指定'info'的結果 */ .tabs .button [class^=app-]:before, .tabs .button [class*=" app-"]:before { color: #0066FF; }
/* variable.scss */ /* 用data-attribute的染色寫法 */ $iconFontsColors: 'info', 'success', 'error', 'warning'; @each $currentColor in $iconFontsColors { .tabs { &[data-iconColor=#{$currentColor}]{ .button { &[data-icon]:before { @if $currentColor == 'info' { color: #0066FF; } @else if $currentColor == 'success' { color: #FFEE99; } @else if $currentColor == 'error' { color: #FF3333; } @else if $currentColor == 'warning' { color: #77FF00; } } } } } }
/* 編譯後的CSS */ .tabs[data-iconColor=info] .button[data-icon]:before { color: #0066FF; } .tabs[data-iconColor=success] .button[data-icon]:before { color: #FFEE99; } .tabs[data-iconColor=error] .button[data-icon]:before { color: #FF3333; } .tabs[data-iconColor=warning] .button[data-icon]:before { color: #77FF00; }

還記不記得之前提過,當你的style class name命名是一個系列,比如「block-container」、「block-row」,我們就可以利用比對選擇器處理:
[class^="block-"] >> 表示匹配開頭有"block-"的所有class name
[class*=" block-"] >> 表示子元素有"block-"的所有class name

<ul> <li> <!-- 調用的方法也非常直覺,可以用class name的方式,也能用data-attribute --> <div class="icon app-star"></div> <p>class key</p> </li> <li> <div class="icon" data-icon="&#xe00c;"></div> <p>data attribute star</p> </li> </ul>

本日後記

我們之所以使用iconFonts的最大理由,就是考慮每個User的網速,和減少對Server端存取的次數,這種字體檔的體積也比一般英數字的種類來的更小,畢竟對於User來說,能縮短等待時間還是有加分的。


tags: Scss iconFonts fontastic