首页 > 资讯 > 设计 > 超方便!快速调整网页排版,一键导出CSS代码的在线工具

超方便!快速调整网页排版,一键导出CSS代码的在线工具


  如果你曾尝试过将文字版面调整到最适合阅读的状态,就会知道这项工作有多么复杂繁琐,但不用担心,科技终究会带来解决问题的方法,国外就有开发者设计出一款能协助我们设计网页排版及字型等相关属性的便利工具。

  Type Anything 前段时间登上国外媒体网站后深获好评,这是一项非常方便的在线工具,功能设计很简单,主要提供一段文章模板(里头包含 H1、H2 标题和文字),用户透过快速按钮来切换字型、文字大小、行高、字重、边缘等相关属性,预览效果。

  当调整到你觉得最舒服的排版后,一键将 CSS 程序代码输出就能套用至自己网站。

  Type Anything

  STEP 1

  开启 Type Anything 后,左侧是调整工具,右侧为默认的文章模板,你也可以把自己的文章复制贴上,透过这项在线服务来进行排版调整,从网页浏览器上实时看到效果。

  

Type-Anything2016-07-19_1509

 

  STEP 2

  它跟一般的文本编辑器有点相似,选取文字段落后可将它切换为 H1、H2 或 H3 标题,或加入粗体、斜体及底线效果,在设定完标题及内文位置后,利用左侧来进行样式编辑。

  

Type-Anything2016-07-19_1510

 

  STEP 3

  Type Anything 能切换调整不同的字型组合,输入字型名称就能实时搜寻 Google Fonts 里收录的免费字型,不过这里目前还无法使用中文字型,因此你可以先选择任一字型,最后导出 CSS 后再进行细部修改。提供免费的中文网页字型服务包括:

  

Type-Anything2016-07-19_1510-2

 

  STEP 4

  从 Type Anything 左侧工具栏来进行排版的细节调整,包括字号、字重、行高、透明杜、顶部距离、底部距离、字距和全部显示为大写小写等设定值。

  

Type-Anything2016-07-19_1515

 

  最后,点选右上角的「Get the Code」就会产生刚才的排版 CSS 样式表单,之后应该知道该怎么做了吧?此外,Type Anything 会加载由 Google Fonts 提供的网页字型,若你是使用中文字型,可以将它做适当调整。

  

Type-Anything2016-07-19_1516
感谢关注 Ithao123设计频道,ithao123.cn是专门为互联网人打造的学习交流平台,全面满足互联网人工作与学习需求,更多互联网资讯尽在 IThao123!

关键词:

精选专题

Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来;它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁、富于表达力。

Hadoop是一个由Apache基金会所开发的分布式系统基础架构。 用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。 Hadoop实现了一个分布式文件系统(Hadoop Distributed File System),简称HDFS。HDFS有高容错性的特点,并且设计用来部署在低廉的(low-cost)硬件上;而且它提供高吞吐量(high throughput)来访问应用程序的数据,适合那些有着超大数据集(large data set)的应用程序。HDFS放宽了(relax)POSIX的要求,可以以流的形式访问(streaming access)文件系统中的数据。 Hadoop的框架最核心的设计就是:HDFS和MapReduce。HDFS为海量的数据提供了存储,则MapReduce为海量的数据提供了计算。

产品设计是互联网产品经理的核心能力,一个好的产品经理一定在产品设计方面有扎实的功底,本专题将从互联网产品设计的几个方面谈谈产品设计

随着国内互联网的发展,产品经理岗位需求大幅增加,在国内,从事产品工作的大部分岗位为产品经理,其实现实中,很多从事产品工作的岗位是不能称为产品经理,主要原因是对产品经理的职责不明确,那产品经理的职责有哪些,本专题将详细介绍产品经理的主要职责