网站上使用的字体会影响用户的阅读体验，这就是网页设计师经常花大量时间寻找 适合其网站设计的 好的字体对 的原因 。
我们选择一种字体 ，然后将其转换为与Web兼容的格式，然后将其添加到样式规则中 。 这远非高效，尤其是当您必须使用多种字体多次重复该过程时。 这里是一种替代方法： Font Dragr 。
Font Dragr提供了一种快速简便的方法来在浏览器上测试Web字体。 只需将字体从字体集合中拖动到页面上，该页面上的字体就会自动更改为所选字体。 让我们来看看。
推荐读物： 网页设计展示精美的版式
Font Dragr是由Ryan Seddon使用@font-face规则，HTML5 Drag-n-Drop API和脱机访问applicationCache开发的，它使我们在初次访问后无需连接互联网即可使用它。
它支持各种字体文件类型，包括TrueType（TTF），OpenType（OTF）， 可缩放矢量图形 （SVG）和Web开放字体格式（WOFF） 。 使用字体拖动器，您可以通过两种方式测试字体：
1.默认方法
访问FontDragr，然后将n拖放到页面上的任意位置。 您将找到两个选项卡： 编辑器和库选项卡。
编辑器选项卡将帮助您根据以下方面测试字体：
- 体型比较
- 灰阶
- 字体大小
- 文字样本
- 性格
页面上的文本是完全可编辑的，因此您可以测试所需的任何文本。
如果您需要一些字体进行试验，则可以获取Gallery页面中列出的9种字体中的任一种进行试验。
2.使用书签
或者，可以使用小书签。 只需将小书签拖动到书签栏，然后在要测试的网页上单击即可。 让我们通过hongkiat.com进行演示。 以下屏幕截图是我们采取行动之前的站点。
单击书签后，将显示一个标题（请参见下文）。 在“选择器”文本框中，您可以指定要在其上测试字体HTML元素。 默认选择器是p标签，但是您可以测试body ， h1 ， h2等。
然后，将您的字体拖放到FontDragr标头。
受影响的文本将自动更改以反映您选择测试的字体。 在下面的这张照片中，已更改的字体用红色框标记。
不幸的是，该书签无法在Facebook和所有使用HTTPS协议的网站上使用 。 此外，如果重新加载网页，则只能隐藏或删除显示的标题。
此外，拖放功能似乎仅在Firefox 3.6+和Chrome中有效。
包起来
如果您曾经使用过其他类似的Webfont服务（例如FontFonter和FontFriend） ，则可能会发现Font Dragr最完整，最易用。 但是，请不要相信我们的话，请尝试一下，并给我们留下评论该应用程序如何为您工作（或不工作）的信息。
翻译自: https://www.hongkiat.com/blog/live-test-fonts-font-dragr/