为什么我的自定义字体在移动设备上不起作用？

Question

为什么我的自定义字体不能在移动设备上运行，但在桌面上运行良好？

这是我放在 css 文件顶部的代码：

@font-face {
    font-family: 'NewYork';
    src: url('fonts/NewYork.eot');
    src: url('fonts/NewYork.eot?#iefix') format('embedded-opentype'),
        url('fonts/NewYork.woff2') format('woff2'),
        url('fonts/NewYork.woff') format('woff'),
        url('fonts/NewYork.ttf') format('truetype'),
        url('fonts/NewYork.svg#NewYork') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url('fonts/MontserratAlternates-Regular.eot');
    src: url('fonts/MontserratAlternates-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/MontserratAlternates-Regular.woff2') format('woff2'),
        url('fonts/MontserratAlternates-Regular.woff') format('woff'),
        url('fonts/MontserratAlternates-Regular.ttf') format('truetype'),
        url('fonts/MontserratAlternates-Regular.svg#MontserratAlternates-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat Alternates';
    src: url('fonts/MontserratAlternates-Light.eot');
    src: url('fonts/MontserratAlternates-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/MontserratAlternates-Light.woff2') format('woff2'),
        url('fonts/MontserratAlternates-Light.woff') format('woff'),
        url('fonts/MontserratAlternates-Light.ttf') format('truetype'),
        url('fonts/MontserratAlternates-Light.svg#MontserratAlternates-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

这就是我的风格：

*{
font-family: 'Montserrat Alternates', serif;
color: rgba(40, 40, 43, 1);
font-size: clamp(12px, 30vw, 18px);
font-weight: normal;
font-style: normal;
font-display: swap;
line-height: 1.7em;
padding: 0;
max-width: 100%;
margin: 0;
box-sizing: border-box;
}

h1 {
  font-size: clamp(15px, 9vw, 170px);
  color: rgba(0, 142, 83, 1);
  font-family: 'NewYork', serif;
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  letter-spacing: 0.04em;
  line-height: 7rem;
  text-align: center;
}

link 到站点及其外观：https://robynloudang.github.io/Portfolio/index.html

[手机字体截图][1]

[1]: https://i.stack.imgur.com/dWxsj.jpgstrong 文字

Answer 1

您的字体根本没有加载（在桌面视图中也是如此），因为您的字体目录路径不正确。

https://robynloudang.github.io/Portfolio/fonts/MontserratAlternates-Regular.woff2

有效！

https://robynloudang.github.io/Portfolio/styles/fonts/MontserratAlternates-Regular.woff2

不！404

您还将在开发工具中看到一条调试消息。
只需将 "fonts" 文件夹移动到 "styles" 文件夹或编辑您的 @font-face 声明：

    @font-face {
        font-family: 'Montserrat Alternates';
        src: url('../fonts/MontserratAlternates-Regular.woff2') format('woff2'),
            url('../fonts/MontserratAlternates-Regular.woff') format('woff'),
            url('../fonts/MontserratAlternates-Regular.ttf') format('truetype'),
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

为什么我的自定义字体在移动设备上不起作用？

Why are my custom fonts not working on mobile devices?

html

css

mobile

font-face

webfonts