为什么使用 Edge Inspect 在通过 Localhost 的设备中查看时 Typekit 字体不起作用？

Question

使用 Edge Inspect 测试本地运行的站点时，不会下载或呈现 Typekit 字体。

我已将 localhost 添加到我的 Typekit 工具包中允许的域，并添加了我机器的 IP 地址。

在浏览器中查看时字体呈现良好，但在任何设备上都没有。

Answer 1

我正在添加 Adob​​e 支持人员给出的这个答案，希望它能帮助其他人解决这个问题。以下为直接引用：

当您通过主机名localhost 浏览本地网站时， 您网络上的任何其他设备都无法访问它， Edge Inspect 自动获取您机器的本地 IP 地址（即 与网站上显示的外部 IP 不同 whatismyip.com）并将其发送到移动应用程序。例如，让我们 说我有一个 Sinatra 应用程序在我的 Mac 上的 Chrome 中运行 http://localhost:4567。我的 iPhone 无法理解 主机名“localhost”，但它可以看到我的 Mac 使用它的 IP 地址 10.1.10.1，因此 Edge Inspect 将导航到 http://10.1.10.1:4567。

因此，要使字体正常工作，您可以同时添加 localhost 和 10.1.10.1 到您的套件。但是，我们不建议添加本地 IP 套件，因为它们往往会在没有警告的情况下改变。 （在我的例子中 上面，下次我打开我的电脑时，它的 IP 可能已经改变了 到 10.1.10.2，但我只知道字体已经停止工作 再次在我的设备上。）

要解决这个问题，我们建议使用某种形式的“动态 DNS”—— 基本上，一个自动更新的域名 当前 IP，因此将始终指向您的计算机。

如果您使用的是 Mac，最简单的方法是使用 Mac 的 Bonjour 主机名。 Bonjour 是一种内置于 Mac OS X 和 iOS 中的技术 帮助设备通过网络自动找到彼此。

要查找您的 Bonjour 主机名：

1. 在 Mac 上打开系统偏好设置。
2. 选择共享图标。
3. 您的 Bonjour 主机名将显示在顶部区域的“计算机名称”字段下方。

您可以将那里出现的主机名添加到您的工具包中，并在 您网络上的任何 Apple 设备。例如，我的 Bonjour 名字是 Somename-rMBP.local，所以我可以浏览到http://Somename-rMBP.local:4567 on 任何 Mac 或 iOS 设备并查看我的 Sinatra 应用程序。

很遗憾，这个简单的解决方案仅适用于 Apple 设备或 安装了 Apple 的 Bonjour 软件的 Windows PC——你不能使用 此主机名与 Android 手机或平板电脑。如果您需要主机名 可以在任何设备上使用，我有几个选择 推荐：

1. 名为 Forward 的第三方服务提供了一种将端口从您的计算机轻松转发到 Internet 上任何位置的其他设备的方法。 您可以在此处了解有关它们的更多信息并注册 30 天试用： https://forwardhq.com。 Forward会给你一个永久的域名 对于您可以添加到套件中的转发应用程序，例如 dev-yourcompany.fwd.wf.

2. 37signals 有一个名为 xip.io 的免费“通配符 DNS”服务，它会自动将流量转发到本地 IP 地址。你可以得到你的 通过打开系统偏好设置当前本地 IP 地址，然后选择 网络。 IP 地址应显示在下方的小文本中 任何连接处于活动状态的连接状态（即具有 旁边的绿点）。获得IP后，您可以访问您的 [您的 IP].xip.io 上的计算机。要使字体正常工作，请将 *.xip.io 添加到 你的工具包。请记住，您的 IP 可能会更改，因此如果您的网站停止 可以访问，您应该检查以确保您拥有正确的 IP 地址。