源:设计达人(shejidaren888)
最近在更新设计导航 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 中文的字体组合,不仅能让一串串代码变得工整美观,还能减少因字符显示引起的出错率,推荐大家收藏使用。
于可视化布局的实现,其实,目前有两种方式可以实现可视化布局的方式。一种是在网上选择一些免费的可视化布局软件,另一种是直接使用在线可视化拖拽编辑器实现。不管用户选择哪种的方式实现可视化布局的话,他们的作用都是一样的。目前可视化拖拽编辑器可以说是种类繁多, 特别是国外, 开源的商业的, 各种版本, 不一而足,接下来小编就简单介绍几个常见的免费、开源、在线的可视化拖拽编辑器。
一、可视化拖拽编辑器——KindEditor
KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。KindEditor使用JavaScript编写,可以无缝的于Java、.NET、PHP、ASP等程序接合。
二、可视化拖拽编辑器——Smartbi
Smartbi是广州思迈特软件开发的一款软件,目前个人版是永久免费使用的。使用Smartbi的自助仪表盘功能,让你的工作汇报增添精彩。数据可视化不仅丰富且美观,更重要是操作简洁,使用方便。适应多变的分析场景。大大的提高了业务部门用数效率,减少科技部门的人员投入。当然,Smartbi还提供了移动端HTML访问 BI 的功能,方便使用手机来查看 BI 应用。也可以通过集成到第三方报表查看,例如微信,钉钉等app。
图:Smartbi集成使用效果
三、可视化拖拽编辑器——VvvebJs
VvvebJs是一个开源的网页拖拽自动生成的JavaScript库,你可以以简单拖拽的方式生成自己需要的网页样式,内置jquery和Bootstrap,你可以拖拽相关的组件进行网页的构建,非常的方便,而且可以实时修改代码,功能丰富,使用简单,界面友好,特别适合一些专注于展示的网页设计。
四、可视化拖拽编辑器——UEditor
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。特别要说的是,头条号后台发布文章的编辑器就是用的UEditor!
五、可视化拖拽编辑器——Elegant Builder
在Elegant Themes Builder是一个插件,它为方便您编辑页面上的内容提供了一些不可思议的工具。该插件基于一个可视化的的画布,您可以添加,排列你的页面上的大量内容。当你新建一篇文章或页面时此插件显示在正常的文本编辑器下方。该插件允许您快速创建列,滑块,标签,按钮,切换,箱子等等。
以上就是我为大家关于各种可视化拖拽编辑器的推荐。希望对准备入门的新手有所帮助,能够选择合适自己的可视化编辑器。现在备受市场认可的软件其实有很多,选择时必须要结合实际的情况。一般的情况下,选择市面上口碑较好的软件,可能比较不会踩到雷。据我所知,国内数据可视化产品口碑较好的就是Smartbi了。简单方便易上手,可以去试试。
、html的介绍
HTML 的全称为:HyperText Mark-up Language, 指的是超文本标记语言。标记:就是标签, <标签名称></标签名称>,比如:<html></html>、<h1></h1>等,标签大多数都是成对出现的。
所谓超文本,有两层含义:
html是用来开发网页的,它是开发网页的语言。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>
网页文件的后缀是.html或者.htm, 一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页。
全拼是 Visual Studio Code (简称 VS Code) 是由微软研发的一款免费、开源的跨平台代码编辑器,目前是前端(网页)开发使用最多的一款软件开发工具。
插件名说明Chinese (Simplified) Language Pack for VS Code中文(简体)汉化包open in browser右击在浏览器打开html
点击对应安装的插件,然后再点击卸载按钮即可。
*请认真填写需求信息,我们会在24小时内与您取得联系。