在线html代码⽣成器,⽀持⽹页快速排版CSS代码⼀键⽣成的在
线设计⼯具
⽤户体验现在作为很多⼯作的重中之重,设计师们更要把⽤户体验放在第⼀位,如果你曾经尝试过想把你的板⾯调整到最适合阅读的状态,就会知道多么令⼈抓狂。但是懒⼈总是会创造出新科技,国外开发者为我们带来了今天要讲的协助设计⽹页排版及字型等相关属性的便利⼯具。
type anything 前段时间登上国外媒体⽹站后深获好评,这是⼀项⾮常⽅便的在线⼯具,功能设计很简单,主要提供⼀段⽂章模板(⾥头包含 h1、h2 标题和⽂字),⽤户透过快速按钮来切换字型、⽂字⼤⼩、⾏⾼、字重、边缘等相关属性,预览效果。
当调整到你觉得最舒服的排版后,⼀键将 css 程序代码输出就能套⽤⾄⾃⼰⽹站。
step 1
开启 type anything 后,左侧是调整⼯具,右侧为默认的⽂章模板,你也可以把⾃⼰的⽂章复制贴上,透过这项在线服务来进⾏排版调整,从⽹页浏览器上实时看到效果。
网页设计html代码成品图片step 2
它跟⼀般的⽂本编辑器有点相似,选取⽂字段落后可将它切换为 h1、h2 或 h3 标题,或加⼊粗体、斜体及底线效果,在设定完标题及内⽂位置后,利⽤左侧来进⾏样式编辑。
step 3
type anything 能切换调整不同的字型组合,输⼊字型名称就能实时搜寻 google fonts ⾥收录的免费字型,不过这⾥⽬前还⽆法使⽤中⽂字型,因此你可以先选择任⼀字型,最后导出 css 后再进⾏细部修改。提供免费的中⽂⽹页字型服务包括:
step 4
从 type anything 左侧⼯具栏来进⾏排版的细节调整,包括字号、字重、⾏⾼、透明杜、顶部距离、底部距离、字距和全部显⽰为⼤写⼩写等设定值。
最后,点选右上⾓的「get the code」就会产⽣刚才的排版 css 样式表单,之后应该知道该怎么做了吧?此外,type anything 会加载由google fonts 提供的⽹页字型,若你是使⽤中⽂字型,可以将它做适当调整。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论