整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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

源:设计达人(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的介绍

1.1 html的定义

HTML 的全称为:HyperText Mark-up Language, 指的是超文本标记语言。标记:就是标签, <标签名称></标签名称>,比如:<html></html>、<h1></h1>等,标签大多数都是成对出现的。

所谓超文本,有两层含义:

  1. 因为网页中还可以图片、视频、音频等内容(超越文本限制)
  2. 它还可以在网页中跳转到另一个网页,与世界各地主机的网页链接(超链接文本)

1.2 html的作用

html是用来开发网页的,它是开发网页的语言。

1.3 小结

  • html是开发网页的语言
  • html中的标签大多数都是成对出现的, 格式: <标签名>

二、html的基本结构

2.1 结构代码

<!DOCTYPE html>
<html>
   <head>            
       <meta charset="UTF-8">
       <title>网页标题</title>
   </head>
   <body>
        网页显示内容
   </body>
</html>
  1. 第一行<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。
  2. <html>...</html>标签是开发人员在告诉浏览器,整个网页是从<html>这里开始的,到html结束,也就是html文档的开始和结束标签。
  3. <head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。
  4. <body>...</body>标签是编写网页上显示的内容。

2.2 浏览网页文件

网页文件的后缀是.html或者.htm, 一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页。

2.3 小结

三、vscode的基本使用

3.1 vscode 的基本介绍

全拼是 Visual Studio Code (简称 VS Code) 是由微软研发的一款免费、开源的跨平台代码编辑器,目前是前端(网页)开发使用最多的一款软件开发工具。

3.2 vscode 的安装

  1. 下载网址: https://code.visualstudio.com/Download
  2. 选择对应的安装包进行下载:


  1. 根据下载的安装包双击进行安装即可,当然为了更好的使用 vscode 还可以安装对应的插件。

3.3 vscode 的插件安装

插件名说明Chinese (Simplified) Language Pack for VS Code中文(简体)汉化包open in browser右击在浏览器打开html

  1. 汉化插件安装

  1. open in browser插件安装


  1. 注意: 如果在vscode打开的html文档中右击没有出现 open in browser 类型的选项,需要把当前打开的文件关掉,重新打开这个文件就好了。

3.4 vscode 的插件卸载

点击对应安装的插件,然后再点击卸载按钮即可。

3.5 vscode 的使用

  1. 打开文件夹创建文件


  1. 快速创建html文档的基本结构


  1. 右击在浏览器打开html文档


3.6 设置字体大小


3.7 设置颜色主题


3.8 设置默认浏览器[可选]

  1. 可以根据自己的需要设置默认使用的浏览器


3.9 小结

  • vscode 是由微软研发的一款免费、开源的跨平台代码编辑器
  • 通过资源管理器打开文件夹创建HTML文件,编写 HTML 代码
  • 可以根据需要安装对应的插件
  • 可以设置字体大小和颜色主题