简体   繁体   English

FlowType.js无法正常工作

[英]FlowType.js won't work

I am making a portfolio for myself and want to use FlowType.js for a responsive font but i can't get it working. 我正在为自己准备一个作品集,并希望将FlowType.js用于响应字体,但我无法使其正常工作。 I have tried every Google hit but none of them helped me out. 我已经尝试过Google的所有热门搜索,但没有一个帮助到我。 Could you please look at my code? 你能看看我的代码吗?

Here is my HTML 这是我的HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <LINK HREF="stylesheet/style.css" REL="stylesheet" TYPE="text/css">
    <title>Portfolio Daan Heijmans</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2"></script>
    <script type="text/javascript" src="js/flowtype.js"></script>
</head>
<body>
    <div id="wrapper">
        <div id="header">
            <div id="naam">
                DAAN HEIJMANS
            </div>
            <div id="navigatie_links">
                <ul>
                    <li><a href="#biografie">BIOGRAFIE</a></li>
                    <li><a href="#vakken">VAKKEN</a></li>
                </ul>
            </div>
            <div id="navigatie_rechts">
                <li><a href="nl/index.php">NL /</a></li>
                <li><a href="en/index.php">EN</a></li>
            </div>
            <img src="images/achtergrond_portfolio.png">
            <div id="vakken_navigatie">
                <ul>
                    <li><a href="#">DED2 |</a></li>
                    <li><a href="#"> PPM2 |</a></li>
                    <li><a href="#"> PTM2 |</a></li>
                    <li><a href="#"> SCO2 |</a></li>
                    <li><a href="#"> UXU2</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        $(function(){
            $('wrapper').flowtype();
        });
    </script>
</body>
</html>

this is my CSS 这是我的CSS

body{
width: 100%;
background-color: #FFF;
margin: 0 auto 0 auto;
font-family: "Montserrat Hairline";
overflow: scroll;
font-size: 30px;
}

::-webkit-scrollbar {
width: 0px;  /* remove scrollbar space */
background: transparent;  /* optional: just make scrollbar invisible */
}

#wrapper{
overflow: hidden;
margin: 0 auto 0 auto;
width: 100%;
height: 100%;
}

#header {
max-width: 100%;
max-height: 100%;
}

#header img{
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}

#naam{
width: 70%;
background-color: black;
float: left;
font-size: 1em;
color: white;
}

#navigatie_links{
width: 20%;
background-color: black;
float: left;
font-size: 1em;
color: white;
}

ul, li, a{
text-decoration: none;
color: white;
margin: 0;
padding: 0;
display: inline;
}

#navigatie_rechts{
width: 10%;
height: 10%;
background-color: black;
float: right;
font-size: 1em;
color: white;
}

#vakken_navigatie{
position: absolute;
width: 50%;
height: 10%;
margin: -15% auto 0 28%;
font-size: 1.68em;
}

Try changing $('wrapper').flowtype(); 尝试更改$('wrapper')。flowtype(); to $('#wrapper').flowtype(); 到$('#wrapper')。flowtype();

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM