free-website-font-fit-1

Font Fit 是一个免费网站测试工具,能够快速调整网页各部分的字型、大小、颜色及样式,实时更新显示于页面中,无须额外下载或安装软件。修改后能将修改结果汇出产生分享链结,也会产生程序代码告诉你如何将字型样式套用到你的网页。

设计网页时排版和色彩选择非常重要,其中色彩可以参考「BrandColors」从世界知名品牌标准色来获得灵感,或是一些我曾经介绍过的配色工具;排版的话考虑到字型和字体大小、间距、行高等等,这也是我平时不断调整及测试的部分。对内容网站来说,提供阅听者良好阅读体验不仅是考验也是需要努力的目标,试着以读者角度想,当你在阅读网站时,会想要得到什么样的感觉,这么说好像有点抽象,你可以利用 Font Fit 来找出最合适的排版设计。

Font Fit 和 Fontface Ninja 工具有些类似,不过后者只能查询网站字型、大小,在上方工具栏内进行文字样式测试,相较之下 Font Fit 实时修改网页字号会更适合用于开发。

Fontfit

STEP 1

开启 Font Fit 后,直接从左上角输入要测试的网址,点选「OPEN」后网页会显示于下方,我们就能开始利用 Font Fit 工具栏来切换字号、样式和颜色等设定。

bb201607021

STEP 2

将鼠标光标移动到下方网页的任何组件会出现蓝色框框,点选后就能开始修改。如果你在选取后调整没有效果,那么请从上方字型名称左边的字段选择正确标签(例如 H1 标题)。

bb201607022

从 Font Fit 直接套用特定字型,实时预览文字显示效果,这些字型来自 Google Fonts,包含 Serif、Sans Serif、Display、Handwriting 和 Monospace,数量非常多且丰富。

bb201607023

STEP 3

除了切换字型和字体大小调整外,也能加入粗体、斜体或下底线样式。

bb201607025

Font Fit 非常强大,连调整网页上的文字颜色也能做到!

bb201607024

STEP 4

如果你在修改后,想要传给其他人看看,点选右上角的「Share / Export」可以产生链结以及程序代码,想在网页中套用字型设计,加入第二段 Google Fonts 字型链结后再把最下面的样式表单贴到自己网站的 CSS 档就能使用。

Font-Fit2016-06-30_1704 (1)

【优设酷站22连发!】

  1. 免费图库+导航收集站:《酷站两连发!高品质免费图库站+专注WEB/APP导航收集站》
  2. 音乐站+字体搜索:《酷站两连发!帮你专心工作的音乐站+谷歌字体在线搜索神器》
  3. 渐变色+代码比较:《酷站两连发!渐变色方案全聚合网站+在线代码比较神器》
  4. 配色+占位图:《酷站两连发!在线色彩搭配工具+快速生成占位图片器》
  5. LOGO下载+字体下载:《酷站两连发!可商用的矢量LOGO下载+平面最爱的27款免费字体》
  6. 压缩图片+在线配色:《酷站两连发!在线图片压缩神器+在线配色工具COLOURCO》
  7. CSS Hover动画+宠物小精灵配色:《酷站两连发!宠物小精灵专属配色网站+CSS HOVER动画收集站》
  8. 美女图片+游戏配色:《酷站两连发!游戏配色网站+免费美女素材特供网站》
  9. 在线配色+字体推荐:《酷站两连发!在线配色神器+英文字体推荐网站》
  10. 追波作品变代码+16进制颜色:《酷站两连发!用代码呈现DRIBBBLE作品+16进制颜色网站》
  11. 无缝纹理+多边形背景:《酷站两连发!专注无缝纹理素材站+多边形背景生成器》

原文地址:free.com.tw

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量130万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

点赞
收藏
继续阅读相关文章

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
评论 收藏