在没有系统字体的环境中测试网页

Question

如何在本地机器上测试网页，就像没有某种字体一样？

例如，我的网页使用Roboto字体。我的电脑已经本地安装了Roboto字体。我该如何查看在没有安装这种字体的电脑上，这个网页会是什么样子呢？

假设该字体不是通过CDN或其他方法包含在网页中。

- Alan Thomas

---

使用 VirtualBox 构建虚拟机以进行测试？您可以安装操作系统，创建快照，在各种测试中任意更改，然后只需还原快照即可复位。 - Dave

Answer 1

暂时停用或卸载字体，或改变样式表以在从本地主机请求时不包含该声明。

- kontur

---

看起来你是为数不多能理解我的问题的人之一......我刚做了一个快速搜索——在Windows中，如果你进入控制面板中的字体选项，选择一个正在使用的字体，应该会出现一个“隐藏”选项，它可以临时禁用该字体。这正是我需要的。 - Alan Thomas

同样地，在 macOS 上，您可以在 Font Book.app 实用程序中右键单击以禁用字体，如 https://photos.app.goo.gl/9U7v9KdtCwZ3awfm8。 - Michael

Answer 2

将CSS中的字体系列重命名，以便不再像这样定义字体系列 -

@font-face {
font-family: 'Roboto';
src: url('../fonts/roboto.eot');
src: url('../fonts/roboto.woff') format('woff'), 
     url('../fonts/roboto.ttf') format('truetype'), 
     url('../fonts/roboto.svg') format('svg');
font-weight: normal;
}

如果安装了Roboto字体，系统将使用它。把它更改为类似这样的东西 -

@font-face {
font-family: 'Roboto_web'; //notice the name here
src: url('../fonts/roboto.eot');
src: url('../fonts/roboto.woff') format('woff'), 
     url('../fonts/roboto.ttf') format('truetype'), 
     url('../fonts/roboto.svg') format('svg');
font-weight: normal;
}

因此，Roboto_web 字体不是安装在您系统中的字体，所以它将始终使用 Web 字体。这种方式您就不需要从系统中卸载或禁用此字体。

在 CSS 中，您可以像这样使用它 -

.sample_class{font-family:"Roboto_web"}

- Arun Kumar

Answer 3

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

把这个添加到你的头部。

- Tobias Glaus

---

这是回答完全不同的问题 - 他问的是如何测试在没有本地安装字体的计算机访问网站时网站会看起来像什么，而不是如何安装Web字体。 - W Biggs