问题

Question

背景：

我目前正致力于the following site。

在我的网站上，每个浏览器都可以。但是，在其他人民制度上，案文经常出现问题。它看起来像在下面的图片中。可能是什么问题？

其他信息：

文本在那里，因为你可以标记，复制和粘贴它，但它是不可见的。有些用户可以使用一个浏览器正常工作，但是他们在同一个系统上遇到另一个问题。

屏幕截图：

enter image description here

Answer 1

问题

您的屏幕截图和代码告诉我两件事：

浏览器支持@font-face，因为它确实正确显示了您的图标。
浏览器无法显示字体Fira Sans，因为它未显示。

解决方案

简单方法

要解决此问题，请转到以下链接：

<link href="//fonts.googleapis.com/css?family=Fira+Sans:500%7CFira+Sans:normal%7CFira+Sans:300&amp;subset=latin" rel="stylesheet" type="text/css">

用以下链接替换该链接：

<link href="http://fonts.googleapis.com/css?family=Fira+Sans:300,400,500&subset=latin,cyrillic-ext,latin-ext,cyrillic,greek" rel="stylesheet" type="text/css">

如果确实有效，请考虑optimizing your font here。

如果这不起作用，您需要使用下面描述的其他（更难）解决方案。

艰难的方式

按照以下步骤操作：

Download the font here
从FiraSans-Light.eot文件夹中获取文件FiraSans-Regular.eot，FiraSans-Medium.eot和eot，并将其放入fonts/FiraSans文件夹。
< / LI>
从FiraSans-Light.woff文件夹中获取文件FiraSans-Regular.woff，FiraSans-Medium.woff和woff，并将其放入fonts/FiraSans文件夹。
< / LI>
从FiraSans-Light.ttf文件夹中获取文件FiraSans-Regular.ttf，FiraSans-Medium.ttf和ttf，并将其放入fonts/FiraSans文件夹。
< / LI>
使用this one或this one等在线转换器将FiraSans-Light.ttf，FiraSans-Regular.ttf和FiraSans-Medium.ttf转换为SVG格式。
确保您的SVG文件名为FiraSans-Light.svg，FiraSans-Regular.svg和FiraSans-Medium.svg，并将其放入fonts/FiraSans文件夹。
删除<link href="http://fonts.googleapis.com/css?family=Fira+Sans:300,400,500&subset=latin,cyrillic-ext,latin-ext,cyrillic,greek" rel="stylesheet" type="text/css">并将其替换为以下代码：

<style type="text/css">
    @font-face{
        font-family: 'Fira Sans';
        src:url('fonts/FiraSans/FiraSans-Light.eot');
        src:
            url('fonts/FiraSans/FiraSans-Light.eot') format('embedded-opentype'),
            url('fonts/FiraSans/FiraSans-Light.woff') format('woff'),
            url('fonts/FiraSans/FiraSans-Light.ttf') format('truetype'),
            url('fonts/FiraSans/FiraSans-Light.svg') format('svg');
        font-weight: 300;
        font-style:normal
    }

    @font-face{
        font-family: 'Fira Sans';
        src:url('fonts/FiraSans/FiraSans-Regular.eot');
        src:
            url('fonts/FiraSans/FiraSans-Regular.eot') format('embedded-opentype'),
            url('fonts/FiraSans/FiraSans-Regular.woff') format('woff'),
            url('fonts/FiraSans/FiraSans-Regular.ttf') format('truetype'),
            url('fonts/FiraSans/FiraSans-Regular.svg') format('svg');
        font-weight: 400;
        font-style:normal
    }

    @font-face{
        font-family: 'Fira Sans';
        src:url('fonts/FiraSans/FiraSans-Medium.eot');
        src:
            url('fonts/FiraSans/FiraSans-Medium.eot') format('embedded-opentype'),
            url('fonts/FiraSans/FiraSans-Medium.woff') format('woff'),
            url('fonts/FiraSans/FiraSans-Medium.ttf') format('truetype'),
            url('fonts/FiraSans/FiraSans-Medium.svg') format('svg');
        font-weight: 500;
        font-style:normal
    }
</style>

如果您按照上述每个步骤操作，您的字体应该在所有浏览器中正确显示。

Answer 2

您可以使用Google Chrome开发工具查看正在发生的事情

在chrome中打开开发工具，右键单击然后检查元素
转到网络标签
激活图标过滤器（红色）
选择te类型的过滤器为字体（绿色）

这将向您展示字体会发生什么，它可以帮助您！

Answer 3

尝试修复代码错误，即加载Google字体的断开链接，重复的div ID等。请参阅Showing results for fuuuu.net - validator.w3.org - Nu Html Checker。破坏的Google字体链接可能是某些用户看不到您引用的文字的原因。

在验证报告中向下滚动以查看行号和源代码。开始修复代码错误并重新验证。

并且，学会使用Firefox（或Firebug）或Chrome或Safari或IE中的开发者工具查看您网站上的加载情况以及如何使用和更改CSS和HTML，请参阅控制台错误，404s等。使用开发工具是Web应用程序工作所需的一项非常基本的技能。

Answer 4

我在您的网站中更改了字体系列，然后显示了文字。我建议你只使用＆＃34; Fira Sans＆＃34; font-family，你想要的地方。否则使用其他字体

Answer 5

字体选择很少值得丢失所有文字！只需找到可以使用的新字体即可。

文字并不总是可见 - 网站

背景：

其他信息：

屏幕截图：

5 个答案:

问题

解决方案

简单方法

艰难的方式