开发者

Safari rendering Google Font massive

开发者 https://www.devze.com 2023-02-28 05:41 出处：网络
Hi there am having a problem with my navigation menu, it\'s using a link to Yanone Kaffeesatz via Google Fonts and using 26pt and small caps - it looks fine in IE/FF and Chrome but just checked Safari
相关专题：cssfont-facefonts

Hi there am having a problem with my navigation menu, it's using a link to Yanone Kaffeesatz via Google Fonts and using 26pt and small caps - it looks fine in IE/FF and Chrome but just checked Safari and Iphone and the font-size is considerably larger - so much so that the menu adds a second line

I don't think it's a problem with default font size on Safari as other fonts look identical to other browsers.

Here is the CSS, any help would be much appreciated

* {margin: 0; padding: 0;}
ul {list-style: none;}
a {color: black; text-decoration: none; padding-bottom: 3px;}
a:visited {color: black;}

body {
    width: 100%;
    font-size: 100%;
    background-color: #bab89b;
    background-image:url('http://xxx/assets/background.jpg');
    font-family: HelveticaNeue-Light, Helvetica Neue, Arial, sans-serif;

}

container {
    width: 900px;
    margin: 0 auto;
}

#header {
    width: 900px;
    text-align: center;
    margin: 0 auto;
}

#photo {
    float: left;
    margin-left: 80px;
    margin-right: 80px;
    margin-top: 30px;
}

#photo img {
    padding: 10px;
    background-color: #eee;
    border: 2px solid #ccc;
    rotation: 90deg;
    -webkit-transform: rotate(-10deg) scale(0.9);
    -moz-transform: rotate(-10deg) scale(0.9);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;

}       

#photo img:hover {
    -webkit-transform: rotate(10deg) scale(1.1);
    -moz-transform: rotate(10deg) scale(1.1);
}

#titles {float: left;}

#header h1 {
    font-family: Helvetica Neue, Arial, sans-serif;
    font-size: 56pt;
    font-weight: 100;
    margin-top: 30px;

}

#header h2 {
    font-family: HelveticaNeue-Light, Helvetica Neue, Arial, sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: 20pt;
}

/* NAVIGATION */

#navWrap {
    width: 900px;
    height: 3em;
    margin: 0 auto;
    margin-top: 30px;
    padding-top: 1em;
    padding-bottom: 1em;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    text-align: center;
}

#nav {
    width: 900px;
}

#nav li {
    display: inline;
    line-height: 3em;
    padding: 0 20px;
}

#nav li a {
    font-family: Yanone Kaffeesatz, sans-serif;
    color: black;
    font-variant: small-caps;
    font-size: 26pt;
    margin-right: 40px;
    text-decoration: none;
}


#nav li a:hover {border-bottom: 4px solid black;}
#nav li a.current:hover {border-bottom: none;}

/* CONTENT */

#content {
    width: 900px;
    margin: 0 auto;
    text-align: center;
}

#contentHeader {
    width: 900px;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 20px;
    text-align: center;
}

#contentHeader h2 {
    font-family: Helvetica Neue; Arial, sans-serif;
    font-size: 24pt;
    font-weight: 100;
}


/* SUBJECTS PAGE */


#box1, #box2, #box3 {
    width: 900px;
    margin: 0 auto;
    margin-bottom: 50px;
    font-family: Helvetica Neue, Arial, sans-serif;
    font-weight: 100;
}


.clearer {
    clear: both;

}

.leftContent {
    float: left;
    width: 480px;
    height: 240px;
    padding: 40px;
    border: 1px solid #e7e7e7;
    background-color: #e7e7e7;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin-bottom: 30px;

}

.leftContent h3 {
    font-size: 22pt;
    font-weight: 100;
    margin-bottom: 20px;
}

.leftContent h4 {
    font-size: 18pt;
    font-weight: 100;
    margin-bottom: 20px;
}


.leftContent p {
    font-family: HelveticaNeue-Light, Helvetica Neue, Arial, sans-serif;
    font-size: 11pt;
    line-height: 1.5em;
    font-weight: 300;
}

.rightContent {
    float: right;
    width: 200px;
    height: 120px;
    vertical-align: middle;
    padding: 40px;
    margin-top: 60px;
    margin-bottom: 30px;
    font-style: italic;
}

.rightContent h3 {
    font-size: 16pt;
    font-weight: 100;
    margin-bottom: 15px;
}

.rightContent li {
    font-size: 11pt;
    font-weight: 100;
    line-height: 1.5em;
}



/* FEEDBACK */

.bubbleText {
    width: 550px;
    margin: 30px auto 5px auto;
    border: 1px solid #ccc;
    background-color: #e7e7e7;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    padding: 20px 30px;
    font-family: HelveticaNeue-Light, Helvetica Neue, Arial, sans-serif;
    font-size: 10pt;
    font-weight: 300;
}


.bubbleDesc {
    margin-bottom: 
}

#showMoreLink, #showLessLink {
    margin-top: 40px;
    font-size: 24pt;
    font-style: italic;
    font-variant: small-caps;
    cursor: pointer;
}

#showMoreLink:hover, #showLessLink:hover {
    text-decoration: underline;
}

#moreText {
    display: none;
}

/* BIO */

#leftBioBlock {
    float: left;
    width: 400px;
    margin-right: 60px;
    margin-left: 20px;
}

#rightBioBlock {
    float: left;
    width: 400px;
}

.bioTextBlock {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    width: 350px;
    height: 300px;
    margin: 0 auto 50px auto;
    padding:30px;
    border: 1px solid #e7e7e7;
    background-color: #e7e7e7;
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    border-radius: 15px;
    position: relative;
}

.bioTextBlockCenter {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    width: 400px;
    height: 300px;
    margin: 0 auto;
    padding:30px;
    border: 1px solid #e7e7e7;
    background-color: #e7e7e7;
    -webkit-border-radius: 15px; 
    -moz-border-radius: 15px; 
    border-radius: 15px;

}

.bioTextBlockCenter:hover 

.bioTextBlock, .bioTextBlockCenter{
    -moz-box-shadow: 5px 5px 3px #888;
    -webkit-box-shadow: 5px 5px 3px #888;
    box-shadow: 5px 5px 3px #888;
}

.bioTextHead {
    font-size: 28pt;
    margin-bottom: 20px;
}

.bioTextBlock p, bioTextBlock li, .bioList  {
    font-family: Helvetica Neue, Arial, Sans-serif;
    font-weight: 300;
    font-size: 11pt;
    line-height: 1.4em;
}

.bioList li {
    line-height: 2em;
}

#CVlink {
    position: absolute;
    left: 85px;
    bottom: 30px;
    text-align: center;
    font-family: Helvetica Neue, Arial, sans-serif;
    font-size: 18pt;
    font-weight: 100;
    -webkit-transition: color 0.4s linear;
    -moz-transition: color 0.4s linear;
}

#CVlink:hover {
    color: #ce984e;
}

/* FORM */


form {
    width: 900px;
    margin: 0 auto;
    padding: 40px;

}

legend {
    font-family: HelveticaNeue-Light, Helvetica Neue, Arial, sans-serif;
    font-size: 18pt;
    padding-bottom: 15px;
    font-weight: 100;
}

label { 
     font-family: 'Yanone Kaffeesatz', sans-serif;
     font-size: 16pt;
     display: block;
}

input, select { 
    width: 250px;
    height: 1.5em;
    font-family: HelveticaNeue-Light, Helvetica Neue, Arial, sans-serif;
    font-s开发者_如何学Cize: 12pt;
    color: #575754;
    margin-bottom: 15px;
}


fieldset#formCol1 {
    width: 300px;
    padding: 25px;
    display: inline;
    margin-right: 80px;
    margin-left: 60px;
    vertical-align:top;
}

fieldset#formCol2{
    width: 300px;
    padding: 25px;
    padding-bottom: 37px;
    display: inline;
    vertical-align: top;
}


fieldset#formCol3 {
    clear: both;
    width: 740px;
    margin: 30px auto 0 60px;
    text-align: center;
    padding: 25px;
}

select {
    margin-bottom: 15px;
}

#sendButton {
    width: 80px;
}

textarea {
    width: 450px;
    height: 150px;
    padding: 5px;
    font-family: HelveticaNeue-Light, Helvetica Neue, Arial, sans-serif;
    font-size: 11pt;
}

placeholder {
    font-size: 11pt;
    font-style: italic;
}



#denotes {
    text-align: center;
    margin-top: -20px;
    margin-bottom: -20px;
    font-weight: 100;
}

/* HIDDEN SPAM TRAP BOX */

input.random {display: none;}


/* FOOTER */

#footer {
    width: 900px;
    margin: 100px auto 0 auto;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 20px;
    border-top: 1px dashed #666;
}

#footerCopy {
    font-family: HelveticaNeue-Light, Helvetica Neue, Arial, sans-serif;
    font-size: 10pt;
    font-weight: 100;
    text-align: center;
}

.siteLink {
    text-align: center;
    font-family: Helvetica Neue, Arial, sans-serif;
    font-size: 28pt;
    font-weight: 100;
    -webkit-transition: color 0.8s linear;
    -moz-transition: color 0.8s linear;
}

.siteLink:hover {color: #ce984e; border-bottom: none;}

#profTutor {
    text-align: center;
    font-family: Helvetica Neue, Arial, sans-serif;
    font-size: 14pt;
    font-weight: 100;
    font-variant: small-caps;
    margin-bottom: 20px;
}

/* IPHONE RULES */
@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) {


    div#rightContent1, div#rightContent2, div#rightContent3 {
        display: block;
    }


}

Use 26 px, not 26 pt. Points are intended for print, not screen display and will look different in each browser.

Add this in your body

display: 0.99;

So the whole css will be


    * {margin: 0; padding: 0;}
    ul {list-style: none;}
    a {color: black; text-decoration: none; padding-bottom: 3px;}
    a:visited {color: black;}

    body {
        width: 100%;
        font-size: 100%;
        background-color: #bab89b;
        background-image:url('http://xxx/assets/background.jpg');
        font-family: HelveticaNeue-Light, Helvetica Neue, Arial, sans-serif;
        display: 0.99;

    }

    container {
        width: 900px;
        margin: 0 auto;
    }

    #header {
        width: 900px;
        text-align: center;
        margin: 0 auto;
    }

    #photo {
        float: left;
        margin-left: 80px;
        margin-right: 80px;
        margin-top: 30px;
    }

    #photo img {
        padding: 10px;
        background-color: #eee;
        border: 2px solid #ccc;
        rotation: 90deg;
        -webkit-transform: rotate(-10deg) scale(0.9);
        -moz-transform: rotate(-10deg) scale(0.9);
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;

    }       

    #photo img:hover {
        -webkit-transform: rotate(10deg) scale(1.1);
        -moz-transform: rotate(10deg) scale(1.1);
    }

    #titles {float: left;}

    #header h1 {
        font-family: Helvetica Neue, Arial, sans-serif;
        font-size: 56pt;
        font-weight: 100;
        margin-top: 30px;

    }

    #header h2 {
        font-family: HelveticaNeue-Light, Helvetica Neue, Arial, sans-serif;
        font-style: italic;
        font-weight: 300;
        font-size: 20pt;
    }

    /* NAVIGATION */

    #navWrap {
        width: 900px;
        height: 3em;
        margin: 0 auto;
        margin-top: 30px;
        padding-top: 1em;
        padding-bottom: 1em;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
        text-align: center;
    }

    #nav {
        width: 900px;
    }

    #nav li {
        display: inline;
        line-height: 3em;
        padding: 0 20px;
    }

    #nav li a {
        font-family: Yanone Kaffeesatz, sans-serif;
        color: black;
        font-variant: small-caps;
        font-size: 26pt;
        margin-right: 40px;
        text-decoration: none;
    }


    #nav li a:hover {border-bottom: 4px solid black;}
    #nav li a.current:hover {border-bottom: none;}

    /* CONTENT */

    #content {
        width: 900px;
        margin: 0 auto;
        text-align: center;
    }

    #contentHeader {
        width: 900px;
        margin: 0 auto;
        margin-top: 40px;
        margin-bottom: 20px;
        text-align: center;
    }

    #contentHeader h2 {
        font-family: Helvetica Neue; Arial, sans-serif;
        font-size: 24pt;
        font-weight: 100;
    }


    /* SUBJECTS PAGE */


    #box1, #box2, #box3 {
        width: 900px;
        margin: 0 auto;
        margin-bottom: 50px;
        font-family: Helvetica Neue, Arial, sans-serif;
        font-weight: 100;
    }


    .clearer {
        clear: both;

    }

    .leftContent {
        float: left;
        width: 480px;
        height: 240px;
        padding: 40px;
        border: 1px solid #e7e7e7;
        background-color: #e7e7e7;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        margin-bottom: 30px;

    }

    .leftContent h3 {
        font-size: 22pt;
        font-weight: 100;
        margin-bottom: 20px;
    }

    .leftContent h4 {
        font-size: 18pt;
        font-weight: 100;
        margin-bottom: 20px;
    }


    .leftContent p {
        font-family: HelveticaNeue-Light, Helvetica Neue, Arial, sans-serif;
        font-size: 11pt;
        line-height: 1.5em;
        font-weight: 300;
    }

    .rightContent {
        float: right;
        width: 200px;
        height: 120px;
        vertical-align: middle;
        padding: 40px;
        margin-top: 60px;
        margin-bottom: 30px;
        font-style: italic;
    }

    .rightContent h3 {
        font-size: 16pt;
        font-weight: 100;
        margin-bottom: 15px;
    }

    .rightContent li {
        font-size: 11pt;
        font-weight: 100;
        line-height: 1.5em;
    }



    /* FEEDBACK */

    .bubbleText {
        width: 550px;
        margin: 30px auto 5px auto;
        border: 1px solid #ccc;
        background-color: #e7e7e7;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius: 15px;
        padding: 20px 30px;
        font-family: HelveticaNeue-Light, Helvetica Neue, Arial, sans-serif;
        font-size: 10pt;
        font-weight: 300;
    }


    .bubbleDesc {
        margin-bottom: 
    }

    #showMoreLink, #showLessLink {
        margin-top: 40px;
        font-size: 24pt;
        font-style: italic;
        font-variant: small-caps;
        cursor: pointer;
    }

    #showMoreLink:hover, #showLessLink:hover {
        text-decoration: underline;
    }

    #moreText {
        display: none;
    }

    /* BIO */

    #leftBioBlock {
        float: left;
        width: 400px;
        margin-right: 60px;
        margin-left: 20px;
    }

    #rightBioBlock {
        float: left;
        width: 400px;
    }

    .bioTextBlock {
        font-family: 'Yanone Kaffeesatz', sans-serif;
        width: 350px;
        height: 300px;
        margin: 0 auto 50px auto;
        padding:30px;
        border: 1px solid #e7e7e7;
        background-color: #e7e7e7;
        -webkit-border-radius: 15px; 
        -moz-border-radius: 15px; 
        border-radius: 15px;
        position: relative;
    }

    .bioTextBlockCenter {
        font-family: 'Yanone Kaffeesatz', sans-serif;
        width: 400px;
        height: 300px;
        margin: 0 auto;
        padding:30px;
        border: 1px solid #e7e7e7;
        background-color: #e7e7e7;
        -webkit-border-radius: 15px; 
        -moz-border-radius: 15px; 
        border-radius: 15px;

    }

    .bioTextBlockCenter:hover 

    .bioTextBlock, .bioTextBlockCenter{
        -moz-box-shadow: 5px 5px 3px #888;
        -webkit-box-shadow: 5px 5px 3px #888;
        box-shadow: 5px 5px 3px #888;
    }

    .bioTextHead {
        font-size: 28pt;
        margin-bottom: 20px;
    }

    .bioTextBlock p, bioTextBlock li, .bioList  {
        font-family: Helvetica Neue, Arial, Sans-serif;
        font-weight: 300;
        font-size: 11pt;
        line-height: 1.4em;
    }

    .bioList li {
        line-height: 2em;
    }

    #CVlink {
        position: absolute;
        left: 85px;
        bottom: 30px;
        text-align: center;
        font-family: Helvetica Neue, Arial, sans-serif;
        font-size: 18pt;
        font-weight: 100;
        -webkit-transition: color 0.4s linear;
        -moz-transition: color 0.4s linear;
    }

    #CVlink:hover {
        color: #ce984e;
    }

    /* FORM */


    form {
        width: 900px;
        margin: 0 auto;
        padding: 40px;

    }

    legend {
        font-family: HelveticaNeue-Light, Helvetica Neue, Arial, sans-serif;
        font-size: 18pt;
        padding-bottom: 15px;
        font-weight: 100;
    }

    label { 
         font-family: 'Yanone Kaffeesatz', sans-serif;
         font-size: 16pt;
         display: block;
    }

    input, select { 
        width: 250px;
        height: 1.5em;
        font-family: HelveticaNeue-Light, Helvetica Neue, Arial, sans-serif;
        font-size: 12pt;
        color: #575754;
        margin-bottom: 15px;
    }


    fieldset#formCol1 {
        width: 300px;
        padding: 25px;
        display: inline;
        margin-right: 80px;
        margin-left: 60px;
        vertical-align:top;
    }

    fieldset#formCol2{
        width: 300px;
        padding: 25px;
        padding-bottom: 37px;
        display: inline;
        vertical-align: top;
    }


    fieldset#formCol3 {
        clear: both;
        width: 740px;
        margin: 30px auto 0 60px;
        text-align: center;
        padding: 25px;
    }

    select {
        margin-bottom: 15px;
    }

    #sendButton {
        width: 80px;
    }

    textarea {
        width: 450px;
        height: 150px;
        padding: 5px;
        font-family: HelveticaNeue-Light, Helvetica Neue, Arial, sans-serif;
        font-size: 11pt;
    }

    placeholder {
        font-size: 11pt;
        font-style: italic;
    }



    #denotes {
        text-align: center;
        margin-top: -20px;
        margin-bottom: -20px;
        font-weight: 100;
    }

    /* HIDDEN SPAM TRAP BOX */

    input.random {display: none;}


    /* FOOTER */

    #footer {
        width: 900px;
        margin: 100px auto 0 auto;
        text-align: center;
        padding-top: 60px;
        padding-bottom: 20px;
        border-top: 1px dashed #666;
    }

    #footerCopy {
        font-family: HelveticaNeue-Light, Helvetica Neue, Arial, sans-serif;
        font-size: 10pt;
        font-weight: 100;
        text-align: center;
    }

    .siteLink {
        text-align: center;
        font-family: Helvetica Neue, Arial, sans-serif;
        font-size: 28pt;
        font-weight: 100;
        -webkit-transition: color 0.8s linear;
        -moz-transition: color 0.8s linear;
    }

    .siteLink:hover {color: #ce984e; border-bottom: none;}

    #profTutor {
        text-align: center;
        font-family: Helvetica Neue, Arial, sans-serif;
        font-size: 14pt;
        font-weight: 100;
        font-variant: small-caps;
        margin-bottom: 20px;
    }

    /* IPHONE RULES */
    @media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) {


        div#rightContent1, div#rightContent2, div#rightContent3 {
            display: block;
        }


    }
0

上一篇:

:下一篇

更多 问答 相关资讯：

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

    关注公众号

    热门标签

    图文推荐

    Delphi - Custom drawing a message list

    Delphi - Custom drawing a message list
    C++ header-only include pattern

    C++ header-only include pattern
    IE7 Margin Collapses Into Padding

    IE7 Margin Collapses Into Padding
    in CoffeeScript, how can I use a variable as a key in a hash?

    in CoffeeScript, how can I use a variable as a key in a hash?
    Interactive visualization of a graph in python [closed]

    Interactive visualization of a graph in python [closed]
    How to customise PHP MYSQL tables?

    How to customise PHP MYSQL tables?
    High quality, simple random password generator

    High quality, simple random password generator
    Image Recognition ApI in android

    Image Recognition ApI in android

    开发者开发者网给大家分享系统运维,大数据运维,云计算,编程开发技巧,路由交换,运维和开发相关的资讯及技术文章，同时StackOverflow中文社区，知识经验交流分享。

    法律声明：本站内容均为网友上传，网站举办方负责审核和监督，如存在版权或非法内容，欢迎举报，我们将尽快予以删除。邮箱：devze@qq.com

    Copyright © 2018-2020 开发者. All rights reserved. Powered by 开发者ICP备案号: 京ICP备10032868号-9