2023年1月9日 04:47:28go评论70阅读模式

英文:

Google font not working on Mobile browser

问题

在使用Google Web Fonts中的Space Mono（粗体700斜体）时，它在桌面Chrome上工作正常，但在移动Chrome（或Safari）上不起作用。尝试清除设备缓存也没有效果。似乎它只是回退到标准的等宽字体（New Courier）。

HTML部分看起来像这样：

<!DOCTYPE html>
<html>
  <head>
    <title>Countdown to Ibiza 2023...</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&display=swap" rel="stylesheet">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
    <style> @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&display=swap'); </style>
  </head>
  <body>
    <div class="container">
      <p class="para">Countdown to Ibiza...</p>
      <div class="box">
        <p id="days">Loading...</p>
        <p id="hms">Loading...</p>
      </div>
    </div>
  </body>
</html>

CSS部分看起来像这样：

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&display=swap');

body {
  padding: 0;
  margin: 0;
  background: rgb(238,174,202);
  background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
  font-family: 'Space Mono', monospace;
}

.container {
    display: flex;
    flex-direction: column;
    height: 80vh;
    align-items: center;
    justify-content: center;
  }

.para {
  margin: 0px 0px 10px 0px;
  font-size: 36px;
  text-shadow: 2px 2px rgba(0, 0, 255, .2);
}

.box {
  display: flex;  
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  padding: 0px 60px 0px 60px;
  background-color: white;
  margin: 0;
  box-shadow: 6px 6px 2px 1px rgba(0, 0, 255, .2);
}

#days {
  font-size: 80px;
  margin-top: 30px;
  margin-bottom: 30px;
}

#hms {
  margin-top: 0px;
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
}

@media only screen 
  and (device-width: 390px) 
  and (device-height: 844px) 
  and (-webkit-device-pixel-ratio: 3) {
    .container {
      height: 60vh;
    }
    
    .para {
      font-size: 56px;
      font-family: 'Space Mono', monospace;
    }
  
    #days {
      font-size: 160px;
      font-family: 'Space Mono', monospace;
    }

    #hms {
      font-size: 40px;
      font-family: 'Courier New', Courier, monospace;
    }

  }

@media only screen 
  and (device-width: 428px) 
  and (device-height: 926px) 
  and (-webkit-device-pixel-ratio: 3) {
    .container {
      height: 60vh;
    }
    
    .para {
      font-size: 56px;
      font-family: 'Space Mono', monospace;
    }
  
    #days {
      font-size: 160px;
      font-family: 'Space Mono', monospace;
    }

    #hms {
      font-size: 40px;
      font-family: 'Courier New', Courier, monospace;
    }
  
  }

你在这里做错了什么？这个问题可能出现在移动浏览器不支持字体的情况下，或者可能是字体加载速度较慢导致页面首次加载时使用了默认字体。你可以尝试以下几个步骤来解决问题：

确保网络连接正常，以便字体可以从Google Web Fonts正确加载。你可以在浏览器的开发者工具中查看网络请求，以确认字体是否成功加载。
考虑使用Web字体加载器，例如Font Face Observer（https://fontfaceobserver.com/），来确保在字体加载完成之前不显示文本。
如果字体加载速度较慢，可以考虑将字体文件下载到你的服务器并从本地加载，以提高加载速度。
在移动浏览器上，确保没有任何CSS规则覆盖了字体设置，可以在开发者工具中检查元素的计算样式来确认。
如果可能的话，尝试使用通用字体族作为后备，以便在字体加载失败时使用默认字体，而不是New Courier。例如，你可以使用font-family: 'Space Mono', monospace, sans-serif;，这将在字体加载失败时回退到等宽字体。

通过以上步骤，你应该能够解决在移动浏览器上字体显示不正确的问题。希望这可以帮助你解决困扰你的问题。

英文:

Using Space Mono (Bold 700 Italic) from Google web fonts: https://fonts.google.com/specimen/Space+Mono?query=space+mono

It works fine on desktop Chrome but not Mobile Chrome (or Safari for that matter). I have tried clearing the device cache but no work. It looks like it is just defaulting back to standard monospace font (New Courier).

html looks like this:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Countdown to Ibiza 2023...&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
&lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;&lt;link href=&quot;https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
&lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;180x180&quot; href=&quot;/apple-touch-icon.png&quot;&gt;
&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;32x32&quot; href=&quot;/favicon-32x32.png&quot;&gt;
&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;16x16&quot; href=&quot;/favicon-16x16.png&quot;&gt;
&lt;link rel=&quot;manifest&quot; href=&quot;/site.webmanifest&quot;&gt;
&lt;link rel=&quot;mask-icon&quot; href=&quot;/safari-pinned-tab.svg&quot; color=&quot;#5bbad5&quot;&gt;
&lt;meta name=&quot;msapplication-TileColor&quot; content=&quot;#da532c&quot;&gt;
&lt;meta name=&quot;theme-color&quot; content=&quot;#ffffff&quot;&gt;
&lt;style&gt; @import url(&#39;https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&amp;display=swap&#39;); &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;p class=&quot;para&quot;&gt;Countdown to Ibiza...&lt;/p&gt;
&lt;div class=&quot;box&quot;&gt;
&lt;p id=&quot;days&quot;&gt;Loading...&lt;/p&gt;
&lt;p id=&quot;hms&quot;&gt;Loading...&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

and CSS looks like this:

@import url(&#39;https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&amp;display=swap&#39;);
body {
padding: 0;
margin: 0;
background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
font-family: &#39;Space Mono&#39;, monospace;
}
.container {
display: flex;
flex-direction: column;
height: 80vh;
align-items: center;
justify-content: center;
/* border: 1px solid black; */
}
.para {
margin: 0px 0px 10px 0px;
font-size: 36px;
text-shadow: 2px 2px rgba(0, 0, 255, .2);
}
.box {
display: flex;  
flex-direction: column;
align-items: center;
justify-content: center;
/* border: 1px dotted black; */
border-radius: 40px;
padding: 0px 60px 0px 60px;
background-color: white;
margin: 0;
box-shadow: 6px 6px 2px 1px rgba(0, 0, 255, .2);
}
#days {
font-size: 80px;
margin-top: 30px;
margin-bottom: 30px;
/* border: 1px solid black; */
}
#hms {
margin-top: 0px;
font-family: &#39;Courier New&#39;, Courier, monospace;
font-weight: bold;
/* font-weight: 500; */
}
@media only screen 
and (device-width: 390px) 
and (device-height: 844px) 
and (-webkit-device-pixel-ratio: 3) {
.container {
height: 60vh;
}
.para {
font-size: 56px;
font-family: &#39;Space Mono&#39;, monospace;
}
#days {
font-size: 160px;
font-family: &#39;Space Mono&#39;, monospace;
}
#hms {
font-size: 40px;
font-family: &#39;Courier New&#39;, Courier, monospace;
}
}
/* 2778x1284 pixels at 458ppi */
@media only screen 
and (device-width: 428px) 
and (device-height: 926px) 
and (-webkit-device-pixel-ratio: 3) {
.container {
height: 60vh;
}
.para {
font-size: 56px;
font-family: &#39;Space Mono&#39;, monospace;
}
#days {
font-size: 160px;
font-family: &#39;Space Mono&#39;, monospace;
}
#hms {
font-size: 40px;
font-family: &#39;Courier New&#39;, Courier, monospace;
}
}

What am I doing wrong here? Pulling my hair out over this one!

答案1

得分: 2

目前，您只加载了 font-style: italic 和 font-weight: 700。

检查谷歌字体 @font-face 输出：

/* 拉丁字符集 */
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacemono/v12/i7dSIFZifjKcF5UAWdDRYERE_FeqHCSR.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

但是，在您的类中没有指定任何字体重量或样式。

所以只需像这样添加这些属性：

body,
.para,
#days {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-style: italic;
}

如果您希望将 'Space Mono' 映射到常规字体重量和样式 - 只需添加一个覆盖的 @font-face 规则，像这样：

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacemono/v12/i7dSIFZifjKcF5UAWdDRYERE_FeqHCSR.woff2) format('woff2');
}

您的 HTML 和 CSS 代码看起来都很好，没有需要翻译的部分。

英文:

Currently, you're loading only font-style:italic and font-weight:700.
Check the google fonts @font-face output:

/* latin */
@font-face {
font-family: &#39;Space Mono&#39;;
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/spacemono/v12/i7dSIFZifjKcF5UAWdDRYERE_FeqHCSR.woff2) format(&#39;woff2&#39;);
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

But you haven't specified any font-weights or styles in your classes.

So just add these properties like so:

body,
.para,
#days  {
font-family: &#39;Space Mono&#39;, monospace;
font-weight:700;
font-style:italic;
}

If you want the 'Space Mono' to be mapped to regular font-weight and style - just add an overriding @font-face rule like so:

@font-face {
font-family: &#39;Space Mono&#39;;
font-style: regular;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/spacemono/v12/i7dSIFZifjKcF5UAWdDRYERE_FeqHCSR.woff2) format(&#39;woff2&#39;);
}

@font-face {
font-family: &#39;Space Mono&#39;;
font-style: regular;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/spacemono/v12/i7dSIFZifjKcF5UAWdDRYERE_FeqHCSR.woff2) format(&#39;woff2&#39;);
}
body {
padding: 0;
margin: 0;
background: rgb(238, 174, 202);
background: radial-gradient(
circle,
rgba(238, 174, 202, 1) 0%,
rgba(148, 187, 233, 1) 100%
);
font-family: &quot;Space Mono&quot;, monospace;
}
.container {
display: flex;
flex-direction: column;
height: 80vh;
align-items: center;
justify-content: center;
/* border: 1px solid black; */
}
.para {
margin: 0px 0px 10px 0px;
font-size: 36px;
text-shadow: 2px 2px rgba(0, 0, 255, 0.2);
}
.box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* border: 1px dotted black; */
border-radius: 40px;
padding: 0px 60px 0px 60px;
background-color: white;
margin: 0;
box-shadow: 6px 6px 2px 1px rgba(0, 0, 255, 0.2);
}
#days {
font-size: 80px;
margin-top: 30px;
margin-bottom: 30px;
/* border: 1px solid black; */
}
#hms {
margin-top: 0px;
font-family: &quot;Courier New&quot;, Courier, monospace;
font-weight: bold;
/* font-weight: 500; */
}
@media only screen 
and (device-width: 390px) 
and (device-height: 844px) 
and (-webkit-device-pixel-ratio: 3) {
.container {
height: 60vh;
}
.para {
font-size: 56px;
font-family: &#39;Space Mono&#39;, monospace;
}
#days {
font-size: 160px;
font-family: &#39;Space Mono&#39;, monospace;
}
#hms {
font-size: 40px;
font-family: &#39;Courier New&#39;, Courier, monospace;
}
}
/* 2778x1284 pixels at 458ppi */
@media only screen 
and (device-width: 428px) 
and (device-height: 926px) 
and (-webkit-device-pixel-ratio: 3) {
.container {
height: 60vh;
}
.para {
font-size: 56px;
font-family: &#39;Space Mono&#39;, monospace;
}
#days {
font-size: 160px;
font-family: &#39;Space Mono&#39;, monospace;
}
#hms {
font-size: 40px;
font-family: &#39;Courier New&#39;, Courier, monospace;
}
}

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Countdown to Ibiza 2023...&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
&lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;&lt;link href=&quot;https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@1,700&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
&lt;link rel=&quot;apple-touch-icon&quot; sizes=&quot;180x180&quot; href=&quot;/apple-touch-icon.png&quot;&gt;
&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;32x32&quot; href=&quot;/favicon-32x32.png&quot;&gt;
&lt;link rel=&quot;icon&quot; type=&quot;image/png&quot; sizes=&quot;16x16&quot; href=&quot;/favicon-16x16.png&quot;&gt;
&lt;link rel=&quot;manifest&quot; href=&quot;/site.webmanifest&quot;&gt;
&lt;link rel=&quot;mask-icon&quot; href=&quot;/safari-pinned-tab.svg&quot; color=&quot;#5bbad5&quot;&gt;
&lt;meta name=&quot;msapplication-TileColor&quot; content=&quot;#da532c&quot;&gt;
&lt;meta name=&quot;theme-color&quot; content=&quot;#ffffff&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;container&quot;&gt;
&lt;p class=&quot;para&quot;&gt;Countdown to Ibiza...&lt;/p&gt;
&lt;div class=&quot;box&quot;&gt;
&lt;p id=&quot;days&quot;&gt;Loading...&lt;/p&gt;
&lt;p id=&quot;hms&quot;&gt;Loading...&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

Google字体在移动浏览器上无法正常工作。

问题

答案1

如何在 `

HTML使用`⁄`时，移除整数和分数之间的空格。

如何在Safari中隐藏CSS的offset-path属性？CSS支持的规则不起作用。

如何在已经迭代过的情况下停止渲染一个项目 – ngFor，ngIf，Angular 16

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论