Question

当我在Android或Windows上运行网站时，文本可以正常显示，并且一切运行都非常流畅，但是当我在iOS上运行网站时，文本就消失了。就像它不存在。其他所有元素都包含在内。几乎所有文本都显示出来了：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;
}

Answer 1

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

With your font

With Times New Roman

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

我的网站文字未在iOS设备上呈现

1 个答案: