Question

所以我完成了网站，但我似乎得到了一些错误。字体在我的计算机上工作正常，并且页脚位于正确的位置，但是当我在iPhone上检查网站时，页脚放错了位置，字体也不同。我搜索了谷歌字体上的字体，发现了一个名为OpenSans的字体，因为我相信我读过那些字体与很多媒体兼容的地方？有人可以帮忙吗？感谢您抽空帮助，祝您有个美好的一天！

以下是屏幕截图的链接，以查看手机上的内容：http://imgur.com/Fgfjg54

如果您需要检查网站是否有助于找到解决方案，或者您是否可以看到您的设备或系统出现任何错误，该网站是pinzoniradian.com。我使用的是Mac，我的朋友告诉我，与我给他看的pdf文件相比，他的电脑上的图像看起来有点模糊。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lindsey</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="css/yourCustom.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head> 
<body>
<nav role="navigation" class="navbar navbar-default navbar-static-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="index.html" class="navbar-brand" style="color:#000000">Paulo Pinzon-Iradian</a>
        </div>
        <!-- Collection of nav links and other content for toggling -->
        <div id="navbarCollapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="work.html" style="color:#000000; margin-left:1.5em;">Work</a></li>
                <li><a href="about.html" style="color:#000000; margin-left:1.5em;">About</a></li>
                <li><a href="contact.html" style="color:#000000; margin-left:1.5em;">Contact</a></li>
            </ul>

        </div>
    </div>
</nav>

      <div id="carousel-example-generic" class="carousel slide" data-interval="false">
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="lindsey.jpg" style="width:370px;" alt="lindsey">
            <figcaption>Lindsey</figcaption>
            <figcaption>Damaged iPhone and Image</figcaption>
          </div>
        </div>
        <a class="left carousel-control" href="liferockslifesucks.html" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="malek.html" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

  <footer class="footer">
      <div class="container" style="display: table; height: 50px; overflow: hidden;">
        <p class="text-muted" style="display: table-cell; vertical-align: middle;">&copy; 2013-2015 Paulo Pinzon-Iradian, All Right Reserved</p>
      </div>
    </footer>

</body>
</html>

的CSS：

@font-face
{
    font-family:OpenSans-Regular;
    src:url(fonts/OpenSans-Regular.ttf);
}

.navbar-default{
    background: #fff;
    margin-top:2%;
    border:0px;
}

.navbar-brand
{
    font-family: Open Sans;
    font-size: 22px;
}

ul, li, a
{
    font-family: Open Sans;
    font-weight: 400;
    font-size: 22px;
    color: #000000;
    font-weight: 100;
    letter-spacing:-1px;
}

.navbar-toggle
{
    border:0px;
}


.container .jumbotron.no-padding
{
    background: #fff;
    border:0px;
    font-family: Open Sans;
    font-size: 22px;
    text-decoration: none;
    padding-left: 0;
    padding-right: 0;
    color:#000000;
}

.footer {
    position: absolute;
    width:100%;
    bottom:0;
    left:0;
    right:0;
    text-align: right;
}
.footer .container {
    width: 100%;
}

.right.carousel-control, .left.carousel-control {
    opacity: 0;
    filter:alpha(opacity=0); /* IE support */
    width:50%;
    height:100%;
}

img
{
    margin:auto;
}

figcaption
{
    display:block;
    text-align:center;
    margin-left:auto;
    margin-right: auto;
}

Answer 1

不要忘记在开始时在css中包含Open-Sans谷歌字体代码

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

之后每次你写Open-Sans都是这样的，所以如果Open-Sans不会加载你有一个bakup

font-family: 'Open Sans', sans-serif;

希望有所帮助

如果您需要网站，请转到meadoweb.com

字体系列不适用于iPhone和页脚在iPhone中屏幕冻结

1 个答案: