網(wǎng)頁(yè)編輯器也美化，F(xiàn)iraCode 代碼專用等寬字體

最近在更新設(shè)計(jì)導(dǎo)航 HTML 代碼時(shí)，發(fā)現(xiàn)有個(gè)樣式總是加載不出來(lái)，經(jīng)過(guò)細(xì)看發(fā)現(xiàn)竟然是因?yàn)橛昧酥形牡碾p引號(hào)導(dǎo)致，但因?yàn)榫W(wǎng)頁(yè)代碼編輯器西文和中文的雙引號(hào)太相似所以忽略查找這個(gè)問(wèn)題，如此初級(jí)的問(wèn)題卻浪費(fèi)了不少時(shí)間……

所以最終解決方案就是為網(wǎng)頁(yè)代碼編輯器使用代碼專用字體：FiraCode + 中文字體組合（也適用于網(wǎng)頁(yè)端），使用此方法，可以美化代碼效果，減少因字符視覺(jué)差造成的小問(wèn)題，對(duì)眼睛疲勞也有一定緩解作用哦。

一、FiraCode字體

FiraCode估計(jì)很多資深編碼人員都了解過(guò)，在 Github 已經(jīng)有30000 的 Star，它主要有2個(gè)特色：

1、字符等寬

每個(gè)字符寬度占用距離是一樣的，所以無(wú)論大小寫(xiě)，你都能看到它是對(duì)齊的，但是若遇到有中文字體，這就不太好使了。

2、連字符號(hào)設(shè)計(jì)

當(dāng)用戶如輸入 這兩個(gè)符號(hào)，就會(huì)自動(dòng)連在一起。如下圖：

二、中文字體選擇

為了解決引號(hào)的視覺(jué)問(wèn)題，我們還必須選擇中文字體，經(jīng)小編測(cè)試一翻后，最后使用了思源黑體，這樣引號(hào)就比較好分別了。WIN 系統(tǒng)下顯示可能會(huì)更加明顯。當(dāng)然最后還是個(gè)人喜好設(shè)置中文字體啦。

mac 系統(tǒng) Atom 編輯器截圖

三、Atom 編輯器修改字體方法

小編使用的免費(fèi)的 Atom 網(wǎng)頁(yè)代碼編輯器，所以只能用它來(lái)舉例，其它編輯器修改方法也大同小異，可自行百度哦。

1、選擇菜單 Atom ，然后在下拉菜單中選擇用戶樣式設(shè)置

2、在「atom-text-editor」加入 font-family 和 font-size 的 CSS 屬性：

需要注意的是，小編使用了 Retina 屏的電腦，所以字體名稱就用「firacode-retina」，在非高清屏的下直接使用「firacode」就行，具體大家可以自己試試，區(qū)別不是很大。

具體如下圖：

四、下載地址

下載的字體非常全面，包含 ttf 及網(wǎng)頁(yè)端的eot, woff 等字體格式，無(wú)需轉(zhuǎn)換就能直接使用。

Firacode

思源黑體下載地址：http://www.shejidaren.com/app-she-ji-bi-bei-zi-ti.html

總結(jié)

使用FiraCode 中文的字體組合，不僅能讓一串串代碼變得工整美觀，還能減少因字符顯示引起的出錯(cuò)率，推薦大家收藏使用。

網(wǎng)站名稱：網(wǎng)頁(yè)編輯器也美化，F(xiàn)iraCode 代碼專用等寬字體
網(wǎng)站URL：http://www.bm7419.com/news/18863.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、虛擬主機(jī)、網(wǎng)站導(dǎo)航、網(wǎng)站改版、定制網(wǎng)站、網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)