标题文字未显示在手机上

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了标题文字未显示在手机上相关的知识，希望对你有一定的参考价值。

This is how it looks on webThis is how it looks on mobile标头文字不会显示在移动设备上。有什么原因吗？我是CSS的新手。以下是我添加的自定义CSS：预先感谢。

更新-也添加了html。抱歉，请耐心等待，如果没有更多说明，似乎无法添加多行代码。

更新2-添加了2张屏幕截图，其中包含2种不同字体的按钮在手机上的外观。为什么它没有出现？

Click here to see screenshot of button with Gotham font - doesn't appearClick here to see screenshot of button with Grumpy font

//ADDING FONTS//

@font-face     
font-family: 'GRUMPY';       
src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e703047b02883185a0fed19/1584410695558/Grumpy+Black48.otf');  
	

@font-face     
font-family: 'GOTHAM-MEDIUM';       
src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e70326a8ddd1113d8ead425/1584411243146/GothamMedium.ttf');  

@font-face     
font-family: 'GOTHAM-BOOK';       
src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e703fe01356f60cd4de3565/1584414689162/GothamBook.ttf');  

//SETTING TYPEFACE//

h1 
  font-family: 'GRUMPY';
  font-size: 7vh;


h2 
  font-family: 'GOTHAM-MEDIUM';
  font-size: 7vh;


h3 
  font-family: 'GOTHAM-MEDIUM';
  font-size: 5vh;


h4 
  font-family: 'GOTHAM-MEDIUM';
  font-size:4vh;


p 
  font-family:'GOTHAM-BOOK';
  font-size: 2.2vh !important;


body 
  font-family:'GOTHAM-BOOK';
  font-size: 2.2vh !important;

<div class="content">

  <div class="sqs-layout sqs-grid-12 columns-12" data-type="page-section" id="page-section-5e6f422ffd82d42cb292dd66">
    <div class="row sqs-row">
      <div class="col sqs-col-12 span-12">
        <div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-592cf9f5c18d780deacb">
          <div class="sqs-block-content">
            <h2 style="text-align:center;white-space:pre-wrap;"><strong>New Beach Collection</strong></h2>
          </div>
        </div>
        <div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-4b700310cae983fab358">
          <div class="sqs-block-content">
            <div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="small">
              <a href="/shop" class="sqs-block-button-element--small sqs-block-button-element">Shop Now</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</section>
答案

标题为何隐藏在Mobile中的问题，可能是因为您在不知不觉中添加了CSS来隐藏它们的原因。我已经向标题元素添加了内联css。请检查以下代码，看看是否可以解决问题。如果您可以共享网站URL，那就更好了。好像您已经用密码保护了网站。如果您可以删除主页的密码保护，那么我们可以在几分钟内解决此问题，然后您可以重新启用它。

<style>
//ADDING FONTS//

@font-face     
font-family: 'GRUMPY';       
src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e703047b02883185a0fed19/1584410695558/Grumpy+Black48.otf');  


@font-face     
font-family: 'GOTHAM-MEDIUM';       
src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e70326a8ddd1113d8ead425/1584411243146/GothamMedium.ttf');  

@font-face     
font-family: 'GOTHAM-BOOK';       
src: url('https://static1.squarespace.com/static/5e671ddf602f01370b0eff04/t/5e703fe01356f60cd4de3565/1584414689162/GothamBook.ttf');  

//SETTING TYPEFACE//

h1 
  font-family: 'GRUMPY';
  font-size: 7vh;


h2 
  font-family: 'GOTHAM-MEDIUM';
  font-size: 7vh;


h3 
  font-family: 'GOTHAM-MEDIUM';
  font-size: 5vh;


h4 
  font-family: 'GOTHAM-MEDIUM';
  font-size:4vh;


p 
  font-family:'GOTHAM-BOOK';
  font-size: 2.2vh !important;


body 
  font-family:'GOTHAM-BOOK';
  font-size: 2.2vh !important;

</style>
<div class="content">

  <div class="sqs-layout sqs-grid-12 columns-12" data-type="page-section" id="page-section-5e6f422ffd82d42cb292dd66">
    <div class="row sqs-row">
      <div class="col sqs-col-12 span-12">
        <div class="sqs-block html-block sqs-block-html" data-block-type="2" id="block-592cf9f5c18d780deacb">
          <div class="sqs-block-content">
            <h2 style="display:block !important;visibility:visible !important;text-align:center;white-space:pre-wrap;"><strong>New Beach Collection</strong></h2>
          </div>
        </div>
        <div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-4b700310cae983fab358">
          <div class="sqs-block-content">
            <div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="small">
              <a href="/shop" class="sqs-block-button-element--small sqs-block-button-element">Shop Now</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
</section>

以上是关于标题文字未显示在手机上的主要内容，如果未能解决你的问题，请参考以下文章

怎么在手机上画一个图,不管啥界面都关不了

chm文件在手机上显示乱码，怎么破？

尝试在手机上安装 app_debug.apk 并获取未安装的应用程序

如何在手机上调试h5

在手机上部署运行scrapyd服务

Android：允许平板电脑纵向和横向，但在手机上强制纵向？