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

【问题标题】：Test webpage in an environment without system fonts在没有系统字体的环境中测试网页
【发布时间】：2020-07-02 14:09:44
【问题描述】：

如何在我自己的机器上测试网页，就好像我没有某种字体一样？

例如我的网页使用字体 Roboto。我的电脑在本地安装了 Roboto 字体。如何在没有安装该字体的计算机上查看此网页的外观？

假设字体没有通过某种CDN或其他方法包含在网页中。

【问题讨论】：

用virtualbox搭建虚拟机做测试？您可以安装一个操作系统，对其进行快照，以任何需要进行各种测试的方式对其进行处理，然后只需恢复快照即可重置。

标签： html css fonts

【解决方案1】：

暂时停用或卸载字体或更改样式表以在从 localhost 请求时不包含声明。

【讨论】：

似乎您是少数了解我的问题的人之一...我只是快速搜索了 - 在 Windows 中，如果您转到控制面板中的字体，选择一种活动字体应该会给您一个“隐藏”选项，它将暂时禁用系统中的字体。正是我需要的。
类似地在 macOS 上的 Font Book.app 实用程序中，您可以右键单击以禁用字体，如 photos.app.goo.gl/9U7v9KdtCwZ3awfm8 中一样

【解决方案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 是您的系统中未安装的字体，因此它将始终使用网络字体。这样您就不必从系统中卸载或禁用它。

而在 CSS 中你可以像这样使用它-

.sample_class{font-family:"Roboto_web"}

【讨论】：

【解决方案3】：

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

将此添加到您的脑海中。

【讨论】：

这是在回答一个完全不同的问题——他问的是如何测试一个没有在本地安装字体的计算机访问时网站的外观，而不是如何安装网络字体。