html - CSS - 'Open Sans' 字体-6ren

html - CSS - 'Open Sans' 字体

转载作者：太空宇宙更新时间：2023-11-04 02:30:16

我在 IE 和 Edge 浏览器中使用本地 .css 文件中定义的“Open Sans”字体时遇到问题。

打开-sans.html:

<html>
    <head>
        <meta charset="utf-8">
        <!--link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'-->
        <link href='open-sans.css' rel='stylesheet' type='text/css'>
        <style type="text/css">
            * {
                font-family: 'Open Sans';
                font-style: normal;
                font-size: 13px;
            }
            .light { 
                font-weight: 300;
            }
            .regular { 
                font-weight: 400;
            }
            .semibold { 
                font-weight: 600;
            }
        </style>
    </head>
    
    <body>
        <p class="light">Lorem ipsum dolor sit amet...</p>
        <p class="regular">Lorem ipsum dolor sit amet...</p>
        <p class="semibold">Lorem ipsum dolor sit amet...</p>
    </body>
    
</html>

在 Chrome 或 FF 中，我看到正确的字体(本地我没有安装“Open Sans”；操作系统 - Windows 10)...在 IE/Edge 中 - 字体无法正常工作。但是，如果我删除指向 open-sans.css 的链接并将使用指向 fonts.googleapis.com 的链接 - 在 IE/Edge 中一切正常。什么原因？ (我的 open-sans.css 是“https://fonts.googleapis.com/css?family=Open+Sans:400,600,300”的完整副本)

如果你问我为什么要使用local open-sans.css？我想使用为“Open Sans”定义的不同字体系列，因为现在如果用户在 Win OS 中安装了“Open Sans”字体 - Chrome 浏览器会错误地显示它们(IE/Edge/FF 都可以)

我正在使用的 open-sans.css:

/* cyrillic-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTa-j2U0lmluP9RWlSytm3ho.woff2) format('woff2');
      unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

/* cyrillic */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTZX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRWV49_lSm1NYrwo-zkhivY.woff2) format('woff2');
      unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTaaRobkAwv3vxw3jMhVENGA.woff2) format('woff2');
      unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTf8zf_FOSsgRmwsS7Aa9k2w.woff2) format('woff2');
      unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTT0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
      unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/K88pR3goAWT7BTt32Z01mxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
      unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

/* cyrillic */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/RjgO7rYTmqiVp7vzi-Q5URJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/LWCjsQkB6EMdfHrEVqA1KRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
      unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/xozscpT2726on7jbcb_pAhJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
      unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/59ZRklaO5bWGqF5A9baEERJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
      unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/u-WUoqrET9fUeobQW7jkRRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
      unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSq-j2U0lmluP9RWlSytm3ho.woff2) format('woff2');
      unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

/* cyrillic */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSpX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2');
      unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShWV49_lSm1NYrwo-zkhivY.woff2) format('woff2');
      unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSqaRobkAwv3vxw3jMhVENGA.woff2) format('woff2');
      unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSv8zf_FOSsgRmwsS7Aa9k2w.woff2) format('woff2');
      unicode-range: U+0102-0103, U+1EA0-1EF1, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSj0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
      unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

Chrome 中的字体(如果我使用本地的 open-sans.css):

IE 中的字体(如果我使用本地 open-sans.css):

已解决:

使用下一个 css，一切正常:

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

最佳答案

您的问题是由于 IE 不支持 woff2 字体格式造成的。

google font自带的css会给不同的浏览器提供不同的字体格式。

如果你用 chrome 打开 https://fonts.googleapis.com/css?family=Open+Sans:400,600,300 你会看到 woff2 字体格式被链接服务的CSS。如果你用 IE/Edge 打开 https://fonts.googleapis.com/css?family=Open+Sans:400,600,300 你会看到 woff2 字体格式被提供的 CSS。

如何解决

你要么将 woff 格式添加到你自己的 open-sans.css 中，要么让谷歌为你链接谷歌 css 做这件事

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300" rel="stylesheet" type="text/css">

关于html - CSS - 'Open Sans' 字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36660893/

文章推荐： c - 为什么退出函数后指针会恢复？

文章推荐： python - 从 python 中的列表列表创建列表

文章推荐： c - 在结构中定义二维网格并访问单元格

文章推荐： python - Selenium 中未发现可用元素

ssl - 具有相同通用名称和不同 SAN 条目的 SAN 证书
是否可以让两个不同的证书(RSA 和 DSA)具有相同的通用名称但不同的 SAN 条目？例如: 证书 1:类型 RSA CN=*.example.com SAN:*.example.ca, *.ex
html - 'Open Sans', sans-serif 在 mac 中看起来不一样
我在我的网站上使用“Open Sans”、sans-serif 作为字体系列。但它在 mac 系统中看起来有点不同。这是它在 mac 中的样子。和这是在其他系统中。最佳答案这实际上是两种不同的
iis - 将新域添加到现有 SSL SAN 证书时，它将如何影响使用 SAN 证书的站点
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。关闭 10 年前。 Improve th
css - 为什么使用 Arial、Helvetica、sans-serif 作为字体系列而不只是 sans-serif？
我不明白这样做有什么意义？对我来说，它呈现的效果完全相同，那么为什么我应该使用 Arial、Helvetica、sans-serif 而不是仅使用 sans-serif？最佳答案用户看到的默认字体
css - Firefox 不呈现 Open Sans、sans-serif、字体大小 : 11 properly
这是字体在 chrome 中的样子: 这是火狐浏览器: 注意到 firefox 中字母之间奇怪的间距了吗？不过在 chrome 中没问题。我观察到的一些事情: 更改字体大小可以解决问题更改字体粗细
html - 如何结合 Noto Sans CJK SC 和 Noto Sans CJK TC
这真是一个奇怪的要求，我正在制作一个香港网站。我需要在同一个网页上支持简体和繁体中文，并且我还希望它是谷歌Noto字体。 Google 提供了简体和繁体两种字体版本。我的问题是，如果我只设置Noto
css - W3C Font-Family Parse error 'Open Sans' , Helvetica, Arial, sans-serif;
为什么在这行 CSS 上会出现解析错误(第 24 行)？ font-family: 'Open Sans', Helvetica, Arial, sans-serif; 我得到这个错误的完整代码是:
service - Centos 7 - 来自/etc/systemd/system/san.service 的服务未使用 systemctl start san.service 运行
我按照此链接的说明进行操作:https://www.thegeekdiary.com/centos-rhel-7-how-to-make-custom-script-to-run-automatica
html - CSS:Helvetica 是 Mac 上的默认 'sans-serif' 字体，而 Arial 是 Windows 上的默认 sans-serif 字体吗？
我有很多 CSS 执行以下操作: font-family: Helvetica, Arial, sans-serif; 据我了解，Helvetica 是 Mac 上的默认无衬线字体，而 Arial 是
存储系列DAS,SAN,NAS常见网络架构
随着主机、磁盘、网络等技术的发展，对于承载大量数据存储的服务器来说，服务器内置存储空间，或者说内置磁盘往往不足以满足存储需要。因此，在内置存储之外，服务器需要采用外置存储的方式扩展存储空间，今天在这里
SSL SAN 证书无法解析备用名称
我目前正在尝试确保 Wildfly 10 应用服务器仅接受 SSL。服务器在我的本地网络中。服务器是我私有(private)域的一部分。我已经从我的 CA 颁发了 SSL SAN 证书并配置 Wild
Hadoop SAN 存储重用
我们有 600TB 的 EMC SAN 存储。目前，Oracle RAC 正在使用此存储。出于可扩展性的原因，我们正在用 Hadoop 存储(Yarn、Spark - Hive、Shark)替换 Or
ssl - wss 连接中忽略的自签名证书 SAN
可以通过 IP 和 DNS 访问 Web 服务。使用以下命令创建包含 DNS 作为通用名称以及 DNS 和 IP 作为 subjectAlternativeName 的自签名证书 openssl r
css - 打开 Sans 在每个浏览器上看起来都很奇怪
3 天前，我突然注意到我在使用 Google 字体中的“Open sans”字体作为主要字体之前建立的一些网站在 Chrome 上看起来很奇怪，断断续续和像素化。我尝试了几个修复，从在 Window
Nginx - 如何访问客户端证书的主题备用名称(SAN)字段
我有一个 Nginx 服务器，客户端使用包含特定 CN 和 SAN 的客户端证书向其发出请求。我希望能够提取该客户端证书的 CN(通用名称)和 SAN(主题备用名称)字段。粗略的示例配置: serv
xamarin - 有没有办法可以在WebView中使用Apple San Francisco？
我的CSS样式表似乎工作正常，但无法将字体更改为与iOS 11中使用的System字体紧密匹配的字体。这是我尝试的方法: body, html { color: red; font-f
url - URL sans 查询参数的正确术语是什么？
假设您有以下网址: http://example.com/path?param=value "param=value"是查询字符串“/path”是路径“http://”是协议(protocol) “h
mysql - SAN/NAS 存储可以连接到云服务器吗？
目前我的老板要求我的团队将我们的数据库迁移到云服务器(Windows)。除此之外，他还要求我们将 SAN/NAS 存储连接到该服务器，以获得更好的速度/性能。问题是我们没有SAN/NAS存储经验。问
html - 是否可以在电子邮件中使用 'Open Sans'
这个问题在这里已经有了答案: Is there a way to use Google Web Fonts in an HTML email? (2 个答案) 关闭 5 年前。我们一直在尝试使用@
linux - 仅在挂载 SAN 时才允许写入目录
问题陈述是这样的:我有一个目录被配置为 SAN 分区的挂载点。现在，由于某些我无法避免的原因，这个 SAN 分区会在启动几分钟后挂载。与此同时，一些进程开始写入目录(仍然不在 SAN 上，只是一个本地

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - CSS - 'Open Sans' 字体