生图提示词手册
首页 前端设计 网页编辑器也美化,FiraCode 代码专用等宽字体

网页编辑器也美化,FiraCode 代码专用等宽字体

最近在更新设计导航 HTML 代码时,发现有个样式总是加载不出来,经过细看发现竟然是因为用了中文的双引号导致,但因为网页代码编辑器西文和中文的双引号太相似所以忽略查找这个问题,如此…

最近在更新设计导航 HTML 代码时,发现有个样式总是加载不出来,经过细看发现竟然是因为用了中文的双引号导致,但因为网页代码编辑器西文和中文的双引号太相似所以忽略查找这个问题,如此初级的问题却浪费了不少时间……

所以最终解决方案就是为网页代码编辑器使用代码专用字体:FiraCode + 中文字体组合(也适用于网页端),使用此方法,可以美化代码效果,减少因字符视觉差造成的小问题,对眼睛疲劳也有一定缓解作用哦。

一、FiraCode字体

FiraCode估计很多资深编码人员都了解过,在 Github 已经有30000 的 Star,它主要有2个特色:

1、字符等宽

每个字符宽度占用距离是一样的,所以无论大小写,你都能看到它是对齐的,但是若遇到有中文字体,这就不太好使了。

2、连字符号设计

当用户如输入 这两个符号,就会自动连在一起。如下图:

二、中文字体选择

为了解决引号的视觉问题,我们还必须选择中文字体,经小编测试一翻后,最后使用了思源黑体,这样引号就比较好分别了。WIN 系统下显示可能会更加明显。当然最后还是个人喜好设置中文字体啦。

mac 系统 Atom 编辑器截图

三、Atom 编辑器修改字体方法

小编使用的免费的 Atom 网页代码编辑器,所以只能用它来举例,其它编辑器修改方法也大同小异,可自行百度哦。

1、选择菜单 Atom ,然后在下拉菜单中选择用户样式设置

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

font-family: "firacode-retina","Source Han Sans CN";
font-size:16px;

需要注意的是,小编使用了 Retina 屏的电脑,所以字体名称就用「firacode-retina」,在非高清屏的下直接使用「firacode」就行,具体大家可以自己试试,区别不是很大。

具体如下图:

四、下载地址

下载的字体非常全面,包含 ttf 及网页端的eot, woff 等字体格式,无需转换就能直接使用。

Firacode 官方下载地址:
https://github.com/tonsky/FiraCode

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

总结

使用FiraCode 中文的字体组合,不仅能让一串串代码变得工整美观,还能减少因字符显示引起的出错率,推荐大家收藏使用。

以上内容就是“网页编辑器也美化,FiraCode 代码专用等宽字体”的全部内容了,喜欢的小伙伴记得点赞收藏,也可以分享给身边感兴趣的朋友。如果你还想了解更多前端设计的相关内容,可以来AdobeEdu设计联盟官方网站获取

生成海报
免责声明:文章内容不代表本站立场,本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺,仅供读者参考,文章版权归原作者所有。如本文内容影响到您的合法权益(内容、图片等),请及时联系本站,我们会及时删除处理。
域名
Avatar photo

作者: AdobeEdu

AdobeEDU设计网址导航,为设计师提供无限的创意参考,欢迎大家同时关注微信公众号:UID的小伙伴们

为您推荐

站酷力荐的AIGC电商设计研修班开班啦

站酷力荐的AIGC电商设计研修班开班啦!来站酷,学AIGGC+电商设计,真实项目贯穿,干货满满,拒绝割韭菜,赶快点击上方...
2022年 CodePen 最热门的前端代码 Top 100

2022年 CodePen 最热门的前端代码 Top 100

每年 Codepen 都会公布年度最热门的代码片段,这些片段有的技术超弦,有的超实用、有的超有创意,有空看看都能给我们带...
优化阅读体验,网站预设字体的CSS最佳写法

优化阅读体验,网站预设字体的CSS最佳写法

英文字体的文件大小比较小可以使用嵌入字体让网站展示更好,但中文就不一样了,文件大小是 MB 级别,为了 WEB 端性能,...
架构图有哪些?很多程序员都不会画

架构图有哪些?很多程序员都不会画

很多程序员画架构图头疼,不知道画什么、怎么画! 分享、评审、述职、答辩,只要你在程序员这个行业,就几乎离不开要画图。 一...
CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

CSS 或 srcset 让浏览器自动切换 1X/2X/3X 图像

现在很多客户都买高分屏的电脑,如果直接发 JPG 图给客户,会影响设计质量。为了让网站设计效果图更加真实,最近把设计提案...

发表回复

返回顶部