Question

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

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

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

Answer 1

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

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

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

.sample_class{font-family:"Roboto_web"}

Answer 3

除非您在网站的样式表中另行指定，否则所有Web浏览器都具有应用于所有元素的基本样式表。此样式表涵盖了字体系列，文本大小调整，颜色，边距和填充等内容。每个Web浏览器都有一个默认样式表。（不相关，进一步阅读，我建议你看看我的答案结束时链接的reset.css，以便更容易为不同的浏览器创建css更容易）。

如果客户端计算机没有Roboto字体，则将忽略设置Roboto字体的CSS规则，它将默认返回浏览器定义的字体。

您可以执行的操作是将Roboto字体上传到您的Web服务器，如以下Stack Overflow问题中所述： How to add some non standard font to a website

此外，您可以使用来自CDN的Roboto字体，例如Google Fonts： Google Fonts Roboto

就个人而言，我更喜欢使用CDN，因为许多其他网站使用相同的字体CDN，而客户端的浏览器可能已经缓存了字体。此外，CDN很快！

如果您对前面提到的reset.css感兴趣，请查看以下网站。这个样式表的作用是重新定义标准样式表，以便每个浏览器都相同。 Eric Meyer reset.css

祝你好运！

Answer 4

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

将此添加到您的头脑中。

Answer 5

如果用户没有安装字体，他们将看不到字体。如果您没有后备字体，它将使用默认的sans-serif字体。拥有像这样的后备字体总是好的。

font-family: 'Roboto', sans-serif;

如果未找到Roboto，则使用sans-serif。

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

5 个答案: