实时预览!帮你免费测试网站字型排版的Font Fit - 优设网 - UISDC

实时预览!帮你免费测试网站字型排版的Font Fit

2016/07/02 8088评论区

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】

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

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.yntianxiong.cn/free-website-font-fit

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

转场动效 优设专访 设计师 扁平化设计 交互设计师 优设大课堂 界面设计 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 设计师专访 AI教程 设计理论 平面设计 神器下载 字体下载 设计趋势 用户体验设计 psd下载 海报设计 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里