博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用Font Dragr轻松在浏览器上实时测试字体
阅读量:2532 次
发布时间:2019-05-11

本文共 886 字,大约阅读时间需要 2 分钟。

网站上使用的字体会影响用户的阅读体验,这就是为什么网页设计师经常花大量时间 。

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

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

它支持各种字体文件类型,包括TrueType(TTF),OpenType(OTF), (SVG)和 。 使用字体拖动器,可以通过两种方式测试字体:

1.默认方法

访问FontDragr,然后将n拖放到页面上的任意位置。 您将找到两个选项卡: 编辑器选项卡。

  • 机身尺寸比较
  • 灰阶
  • 字体大小
  • 文字样本
  • 性格

页面上的文本是完全可编辑的,因此您可以测试所需的任何文本。

字体拖动器编辑器选项卡

如果您需要一些字体进行试验,则可以获取页面中列出的9种字体中的任一种进行试验。

字体拖动编辑器
2.使用书签

或者,可以使用小书签。 只需将小书签拖动到书签栏,然后在要测试的网页上单击它即可。 让我们通过hongkiat.com进行演示。 以下屏幕截图是我们采取行动之前的站点。

演示之前

单击书签后,将显示一个标题(请参见下文)。 在“选择器”文本框中,可以指定要在其上测试字体HTML元素。 默认选择器是p标签,但是您可以测试bodyh1h2等。

字体拖动头

然后,将您的字体拖放到FontDragr标头。

字体拖动器拖放

受影响的文本将自动更改以反映您选择测试的字体。 在下面的这张照片中,已更改的字体用红色框标记。

演示之后

不幸的是,该书签无法在Facebook和所有使用HTTPS协议的网站上使用 。 另外,仅在重新加载网页后才能隐藏或删除显示的标题。

此外,拖放功能似乎仅在Firefox 3.6+和Chrome中有效。

结语

如果您曾经使用过其他类似的例如和 ,则可能会发现Font Dragr是最完整和最容易使用的服务。 但是,请不要相信我们的话,请尝试一下,并给我们留下评论该应用程序如何为您工作(或不工作)的信息。

翻译自:

转载地址:http://kbezd.baihongyu.com/

你可能感兴趣的文章