最近更新设计导航HTML代码时，发现有样式无法加载。 经过仔细检查，发现是使用中文双引号引起的，但是由于网页代码编辑器的西文双引号和中文双引号太相似，就忽略了寻找这个问题网页在线制作网站源码，浪费了很多时间在这样的问题上基本问题...
所以最终的解决方案是网页代码编辑器使用代码专用字体：FiraCode + 中文字体组合（也适用于网页）。 使用这种方法，可以美化代码效果，减少字符视差引起的小问题网页在线制作网站源码，对造成眼睛疲劳也有一定的缓解作用。
1.FiraCode字体
FiraCode 估计很多资深程序员都不陌生。 它在 Github 上已经拥有 30,000 颗星。 它有两个主要特点：
1. 字符等宽
每个字符的宽度占据相同的距离，所以无论大小写都可以看到是对齐的，但是如果遇到中文字体，这个就不太好用了。
2.连字符设计
当用户输入这两个符号时，它们会自动连接在一起。 如下所示：
2.中文字体选择
为了解决引号的视觉问题，我们还必须选择中文字体。 经过小编测试，我们最终使用了思源黑体，这样引号更容易区分。 WIN系统下的显示可能会更明显。 当然，最终设置中文字体还是个人喜好。
mac系统Atom编辑器截图
三、Atom编辑器修改字体方法
编辑器使用免费的Atom网页代码编辑器，所以我只能用它作为示例。 其他编辑器的修改方法类似，大家可以自行百度。
1. 选择菜单Atom，然后在下拉菜单中选择用户风格设置
2. 将 font-family 和 font-size CSS 属性添加到“atom-text-editor”：
font-family: "firacode-retina","Source Han Sans CN";
font-size:16px;
需要说明的是，小编使用的是Retina屏幕的电脑，所以字体名称为“firacode-retina”。 如果您使用非高清屏幕，可以直接使用“firacode”。 你可以自己尝试一下，差别不是很大。
详情如下所示：
4.下载地址
下载的字体非常全面，包括ttf和eot、woff等网页上的字体格式，无需转换即可直接使用。
Firacode官方下载地址：
思源黑体下载地址：
总结
使用FiraCode中文字体组合不仅可以使一串代码整齐美观，而且可以减少字符显示带来的错误率。 推荐大家收藏和使用。
//////结尾//////
✕
✕
好消息
✕
✕
—
设置此公众号为星际
不错过任何一个高品质
设计素材、经验、灵感和超强福利
▼
更多灵感及素材网站请浏览设计导航