英文:
Font does not show up correctly in mobile phone
问题
我尝试在HTML中加载字体，分别使用TTF以及通过转换工具生成的WOFF和WOFF2格式。在我的笔记本电脑上正常显示，但在我母亲的手机上（使用Chrome浏览器）显示不正确：
<script rel="preload" src="https://violetscript.github.io/docs/fonts/cour.woff2" as="font" type="font/woff2" crossorigin></script>
我还尝试了使用TTF格式的CSS @font 语法，但在手机的Web浏览器上仍然无法正常显示，字体与桌面上的显示不同。
所使用的字体是从Windows的C:/Windows/Fonts路径中提取的Courier New字体。
之前的 @font-face
以下是之前的 @font-face 尝试：
@font-face {
font-family: 'Courier New';
font-style: normal;
font-weight: normal;
src: url('https://violetscript.github.io/docs/fonts/cour.woff2') format('woff2');
}
使用 <script/> 的工作示例
<!-- 开始代码段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-css -->
html, body {
font-family: 'Courier New';
font-size: 64px;
}
<!-- 语言: lang-html -->
<script rel="preload" src="https://violetscript.github.io/docs/fonts/cour.woff2" as="font" type="font/woff2" crossorigin></script>
undefined
<!-- 结束代码段 -->
使用 CSS @font-face 的工作示例
<!-- 开始代码段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-css -->
@font-face {
font-family: 'Courier New';
font-style: normal;
font-weight: normal;
src: url('https://violetscript.github.io/docs/fonts/cour.woff2') format('woff2');
}
html, body {
font-family: 'Courier New';
font-size: 64px;
}
<!-- 语言: lang-html -->
undefined
<!-- 结束代码段 -->
有趣的是，如果将 cour.woff2 替换为 verdana.woff2，它将成功更改字体外观为Verdana，即使 body { font-family: 'Courier New' }，因此我的 @font-face 有效。
字体样式
应该显示与以下内容完全相同的文本：
如果将 @font-face 的URL更改为verdana.woff2文件，您将看到以下内容：
将 @font-face 更改为指向Verdana
<!-- 开始代码段: js 隐藏: false 控制台: true Babel: false -->
<!-- 语言: lang-css -->
@font-face {
font-family: 'Courier New';
font-style: normal;
font-weight: normal;
src: url('https://violetscript.github.io/docs/fonts/verdana.woff2') format('woff2');
}
html, body {
font-family: 'Courier New';
font-size: 64px;
}
<!-- 语言: lang-html -->
undefined
<!-- 结束代码段 -->
英文:
I tried to load a font in HTML both in TTF and, via conversion tools, WOFF and WOFF2. It shows up in my laptop, but not correctly in my mother's phone (using Chrome):
<script rel="preload" src="https://violetscript.github.io/docs/fonts/cour.woff2" as="font" type="font/woff2" crossorigin></script>
I did also try CSS @font syntax with TTF and it still didn't show up in the phone's web browser. The font shows different from desktop.
The font in question is Courier New, extracted from Windows' C:/Windows/Fonts path.
Previous @font-face
Here's the previous @font-face attempt:
@font-face {
font-family: 'Courier New';
font-style: normal;
font-weight: normal;
src: url('https://violetscript.github.io/docs/fonts/cour.woff2') format('woff2');
}
Working Snippet using <script/>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html, body {
font-family: 'Courier New';
font-size: 64px;
}
<!-- language: lang-html -->
<script rel="preload" src="https://violetscript.github.io/docs/fonts/cour.woff2" as="font" type="font/woff2" crossorigin></script>
undefined
<!-- end snippet -->
Working Snippet using CSS @font-face
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@font-face {
font-family: 'Courier New';
font-style: normal;
font-weight: normal;
src: url('https://violetscript.github.io/docs/fonts/cour.woff2') format('woff2');
}
html, body {
font-family: 'Courier New';
font-size: 64px;
}
<!-- language: lang-html -->
undefined
<!-- end snippet -->
Interestingly, if you replace cour.woff2 by verdana.woff2, it'll successfully change the font appearance to Verdana, even if body { font-family: 'Courier New' }, so my @font-face just works.
What the font looks like
It should show up text exactly like this:
If you change the @font-face's URL to verdana.woff2 file, you'll see this:
Changing @font-face to point to Verdana
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@font-face {
font-family: 'Courier New';
font-style: normal;
font-weight: normal;
src: url('https://violetscript.github.io/docs/fonts/verdana.woff2') format('woff2');
}
html, body {
font-family: 'Courier New';
font-size: 64px;
}
<!-- language: lang-html -->
undefined
<!-- end snippet -->
答案1
得分: 1
我不能完全确定它是否有效。但据我所知，这是如何从CSS中声明字体的方式。
@font-face {
font-family: 'Cour2';
font-style: normal;
font-weight: normal;
src: url('https://violetscript.github.io/docs/fonts/cour.woff2') format('woff2');
}
html {
font-family: 'Cour2';
}
请告诉我字体是否正确显示。
但仍然不要依赖用户下载字体。始终添加适用于任何设备的备用字体，例如对于 Courier New，您可以：
html {
font-family: 'Cour2, Courier New, monospace';
}
英文:
I can't really be sure it works. But as far as I know this is how you declare a font-face from CSS.
@font-face {
font-family: 'Cour2';
font-style: normal;
font-weight: normal;
src: url('https://violetscript.github.io/docs/fonts/cour.woff2') format('woff2');
}
html {
font-family: 'Cour2';
}
Let me know if the font shows correctly.
Still do not rely on users downloading your fonts. always add fallbacks that work on any device, for example for Courier New you can:
html {
font-family: 'Cour2, Courier New, monospace';
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论