Question

我在Squarespace网站上工作并添加了MyFonts网络字体，用于某些标题和索引菜单。它在桌面上显示得非常漂亮，但当我在移动设备上查看时，几乎所有该字体的实例（Sackers Gothic）都显示错误。它们要么在菜单的情况下重叠，要么离开屏幕。当他们进行中心对齐时，这似乎更成问题。一位用户还说这是她iPad上的一个问题，虽然它看起来很好。对于主页索引菜单，链接也应该在移动设备上转到新行，就像在我的iPad上一样。

我的CSS问题很明显，但我该如何解决？如何让它正常显示（即我只使用内置方形字体或桌面显示方式时显示的方式）？

我遇到根本问题的一个提示是，由于我覆盖了Squarespace正在使用的字体，看来我的iPhone根据Squarespace字体的内容来定位文本，然后转换到MyFonts字体，而不是基于MyFonts字体定位它。但我再次不知道这是实际问题，或者如何解决它。

This is what it looks like on desktop:

这就是它目前在移动设备上的样子：

Home Page

Another Page

这是我使用的所有网站范围内的自定义CSS（如果我遇到更多问题，我会失败）。

    /**
 * @license
 * MyFonts Webfont Build ID 3477103, 2017-11-02T21:34:57-0400
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: SackersGothicMedium by Monotype 
 * URL: https://www.myfonts.com/fonts/mti/sackers-gothic/medium/
 * Copyright: Digitized data (C) 2003 Agfa Monotype Corporation. 
 * 
 * Webfont: SackersGothicMediumAlt by Monotype 
 * URL: https://www.myfonts.com/fonts/mti/sackers-gothic/medium-alt/
 * Copyright: Digitized data (C) 2003 Agfa Monotype Corporation.
 * 
 * 
 * License: https://www.myfonts.com/viewlicense?type=web&buildid=3477103
 * Licensed pageviews: 250,000
 * 
 * © 2017 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */

@import url("//hello.myfonts.net/count/350e6f.css");

@font-face {
  font-family:'SackersGothicMedium';
  src: url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca489140b7d05d1be44c/1509673545091/350E6F_0_0.eot');
  src: url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca489140b7d05d1be44c/1509673545091/350E6F_0_0.eot?#iefix') 
    format('embedded-opentype'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca5e9140b7d05d1be6b9/1509673566929/350E6F_0_0.woff2') 
  format('woff2'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca57f9619ab843b69aba/1509673560243/350E6F_0_0.woff') 
  format('woff'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca50e2c483cd2608015b/1509673553520/350E6F_0_0.ttf')
    format('truetype');
}


@font-face {
  font-family: 'SackersGothicMediumAlt';src: url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca6471c10bfd21731909/1509673572949/350E6F_1_0.eot');src: url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca6471c10bfd21731909/1509673572949/350E6F_1_0.eot?#iefix') format('embedded-opentype'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca7ae4966baa783e612d/1509673594306/350E6F_1_0.woff2') format('woff2'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca75085229ec684a6add/1509673589300/350E6F_1_0.woff') format('woff'),url('//static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fbca6d8165f5e83ce3e406/1509673582003/350E6F_1_0.ttf') format('truetype');}


span.collection-nav-item-span{
  font-family: 'SackersGothicMedium' !important;
}

h2.site-tagline{
  font-family: 'SackersGothicMedium' !important;
}

h2{
  font-family: 'SackersGothicMedium' !important;
   text-transform: lowercase; 
}

h1{
  font-family: 'SackersGothicMedium' !important;
   text-transform: lowercase; 
}

blockquote{
  font-family: 'SackersGothicMedium' !important;
  text-align: center;
}

figcaption{
  font-family: 'Raleway';
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  text-align: center !important;
}

@media only screen and (min-width: 1040px) {
  span.collection-nav-item-span{
      font-size: 3.7vw;
  }
}

 .site-branding h1 {
   background-image:url(https://static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fcef98e31d1945635645b1/1509748633336/FIG_17_WEB_Logo_1_dark.png);
   background-repeat: no-repeat;
   background-size: contain;
 }

 .has-index-nav.swap-header-color:not(.view-item) .site-branding h1 {
   background-image:url(https://static1.squarespace.com/static/54206d9ae4b0423f148f0d6c/t/59fcede408522952619026f3/1509748197382/FIG_17_WEB_Logo_1.png);
   background-repeat: no-repeat;
   background-size: contain;
 }

该网站是figcookingschool.com

这里是主页该部分HTML的屏幕截图 HTML

非常感谢您的帮助!!

为什么自定义字体在移动设备上重叠？

0 个答案: