时间戳

首页 > 解决方案 > 手机上呈现的字体不同，如何在手机上检查？

html - 手机上呈现的字体不同，如何在手机上检查？

问题描述

铬检查员 电话

我的网站上的字体有问题。我在用：

font-family: 'Fredoka One', cursive;

它适用于 PC 和台式机，但在手机上我得到的是小草书字体。我尝试使用媒体查询，但它不起作用

     /* Phone fonts*/
        /* iPad [portrait + landscape] */
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)     {
    body {
    font-weight:800!important;
        font-family: 'Fredoka One', cursive!important;
font-size:20px;
}
}

/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
    body {
font-weight:800!important;
font-size:20px;
        font-family: 'Fredoka One', cursive!important;
}
}

它没有采用任何这些 CSS 样式。当我在 chrome 浏览器上检查 iphone 时它​​工作正常，但是当我实际使用我的手机时它就不同了

标签： htmlcss

解决方案

问题是您的手机上没有安装 Fredoka One 字体。

将以下行放在页面的 head 部分以使其可用：

<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet">

推荐阅读