使用Font Dragr轻松在浏览器上实时测试字体

网站上使用的字体会影响用户的阅读体验，这就是为什么网页设计师经常花大量时间寻找 适合他们网站设计的 好的字体对 的原因 。

我们选择一种字体 ，然后将其转换为与Web兼容的格式，然后将其添加到样式规则中 。 这远非高效，尤其是当您必须使用多种字体多次重复该过程时。 这是一种替代方法： Font Dragr 。

Font Dragr提供了一种快速简便的方法来在浏览器上测试Web字体。 只需将字体从字体集合中拖到页面上，该页面上的字体就会自动更改为所选字体。 让我们来看看。

它支持各种字体文件类型，包括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/