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

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

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

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

Fontfit

STEP 1

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

STEP 2

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

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

STEP 3

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

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

STEP 4

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

【优设酷站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

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

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