我的网站文本未在 iOS 设备上呈现答案

【问题标题】：My website text is not rendering on iOS devices我的网站文本未在 iOS 设备上呈现
【发布时间】：2020-08-09 20:47:22
【问题描述】：

当我在 Android 或 Windows 上运行网站时，文本会正常呈现，并且一切都非常流畅，但是当我在 iOS 上运行网站时，文本就消失了。就像它从未存在过一样。所有其他元素都塞进去了。几乎就像所有文本都有 display: none;

这是我的html：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link id="normalStylesheet" rel="stylesheet" href="style.css">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <title>Tungstun Design and ICT</title>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap" rel="stylesheet"> 
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>

</head>
<body>
    <div class="main_section">
        <div class="header"
        data-aos="header-scroll"
        data-aos-offset="100"
        data-aos-duration="300"
        data-aos-once="false"
        data-aos-anchorPlacement="top-bottom"
        data-aos-anchor=".work_content"
        data-aos-easing="ease-in-out">
            <ul id="header">
                <li id="homeButton" class="headerItem"><a>Home</a></li>
                <li id="workButton" class="headerItem"><a>Work</a></li>
                <li id="contactButton" class="headerItem"><a>Contact</a></li>
            </ul>
            <img class="header_logo" src="images/logo@2x.png">
        </div>
        
        <div id="homeSection" class="logo_container">
            <img class="logo" src="images/logo@2x.png"> 
        </div>
    
        <div class="buttons_container">
            <button id="workMainButton" class="button primary_button">Work</button>
            <button id="contactMainButton" class="button secondary_button">Contact</button>
        </div>
        
        <div class="image_div">
            <img src="images/bgovals@2x.png" id="bgOvals">
        </div>
        <div class="circle_div"
        data-aos="tagline-scroll"
        data-aos-offset="100"
        data-aos-duration="300"
        data-aos-once="false"
        data-aos-anchorPlacement="top-bottom"
        data-aos-anchor=".work_content"
        data-aos-easing="ease-in-out">
            <img src="images/bgcircle@2x.png" id="bgCircle">
            <h1 id="tagLine">A small IT and design company based in Utrecht</h1>
        </div>
        
        <div class="bottom_stroke"><hr><hr><hr></div>
    </div>
    <div id="workSection" class="work_content">
        <h1 class="title">My work</h1>
        <ul id="workList" class="work_list">

            <li>
                <div class="work_li_div">
                    <img src="images/amblogo.png" class="work_image">
                    <div class="work_name_div">Alles met boeken</div>
                </div>
            </li>

            <li>
                <div class="work_li_div">
                    <img src="images/Herfst.png" class="work_image">
                    <div class="work_name_div">VanGister</div>
                </div>
            </li>

            <li>
                <div class="work_li_div">
                    <img src="images/logo-transparent@2x.png" class="work_image">
                    <div class="work_name_div">Heimstel</div>
                </div>
            </li>

            
        </ul>
        <div class="bottom_stroke"><hr><hr><hr></div>
    </div>

    

    <div id="contactSection" class="contact_content">
        <h1 class="title">Contact me</h1>
        <h2>Let's make something great together!</h2>
        <div class="form_div">
            <form>
                <label for="formName">Your name</label><br>
                <input id="formName" type="text"><br>
                <label for="formEmail">Your e-mail</label><br>
                <input id="formEmail" type="email"><br>
                <label for="formType">What can I do for you?</label><br>
                <select id="formType"></select><br>
                <form action="formMessage">Anything to add?</form>
                <textarea id="formMessage" type="text"></textarea><br>
                <button id="formConfirmButton" type="button">Shoot!</button>
            </form>
        </div>

        <div class="bottom_stroke"><hr><hr><hr></div>
    </div>
    
    <script src="work.js" type="text/javascript"></script>

    <script>
        AOS.init();
    </script>
</body>
</html>

这里是我的css

@font-face {
    font-family: gotham_medium;
    src: url(font/GothamMedium.svg);
    src: url(font/GothamMedium.ttf);
}

@font-face {
    font-family: gotham_book;
    src: url(font/GothamBook.svg);
    src: url(font/GothamBook.ttf);
}

html, body {
    background-color: var(--tungstun-background);
    margin: 0px;
    font-family: 'gotham_medium', 'Open Sans', sans-serif;;
    text-rendering: optimizeLegibility;
}

【问题讨论】：

您缺少 ios 所需的字体格式，例如 woff: stackoverflow.com/questions/27158639/…
感谢您的帮助！我添加了 .woff 和 .woff2 文件格式，现在 iOS 完美地显示了它:)

标签： html css ios text

【解决方案1】：

您的实现是正确的，但 .ttf 文件已损坏。 Chrome 比 safari 更宽容，但您可以看到字体在 chrome 上的行为也很奇怪（使用您的字体和浏览器默认字体比较两张图片）

从受信任的来源加载字体，如果您使用在线服务重构了该字体，请尝试另一种。网站本身可以运行，你可以通过改变字体来测试它。

【讨论】：