【问题标题】:Why doesnt my custom font load even though works in local?为什么即使在本地工作,我的自定义字体也无法加载?
【发布时间】:2019-07-15 00:05:51
【问题描述】:

我试图在我的网站标题中使用 Raleway 字体系列。在本地测试中它工作正常,但是当推送到 git 并在 git 页面上运行时它不起作用。我什至在目录中指定了文本字体 TTF 文件,但仍然不起作用。我做错了什么?

网站

https://codesniper99.github.io/Portfolio/

我的 html 索引文件

<!DOCTYPE html>
<!-- copyright akhil vaid if anybody copies this my code is here so good luck 2017UCO1521 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body style="color:black"></body>
    <div class="container text-pri" style="font-family:Open-sans; padding: 0%;margin-right: 0%;    ">
     <!-- Header -->
     <div class="parallax">
         <span  class="topbar" > ABOUT</span>
         <span  class="topbar" > &nbsp; &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;&nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;&nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;&nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;&nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  SKILLS</span>
         <span  class="topbar" > &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;EXPERIENCE</span>
         <span  class="topbar" > &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;ACHIEVEMENTS</span>
         <span  class="topbar" > &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;CONTACT ME</span>
        <span class="center rcorners2 " style="font-family:Raleway ;font-size: 4.0em;"> 
           <span style="color: #E04343;">A</span><span >KHIL</span> 
           <span style="color: #FFE800;">V</span><span>AID</span> 
        </span>
     </div>  

        <!-- Introduction -->
        <div class="intro rcorners1">
            <h3 style="text-align: center;">ABOUT ME</h3><br>
        <p>
                I'm a second year Under-graduate student currently pursuing Computer Science and Engineering at
                NSIT, New Delhi, India. I'm new to the industry and keen to expand my skill set.<br> <br> I have a curiosity in
                the field of Web Development and Competitive Programming and using it to solve real world
                problems and am willing to take up opportunities to delve into it.
                <br>
                <br>

        </p>
        </div>
        <!-- Skills -->
        <h5><b>
                Skills and Technologies
            </b>
            </h5>
            <ul>
                    <li>C++ (GNU 14.2), C
                    </li>
                    <br>
                    <li>
                            Java
                    </li>
                    <br>
                    <li>
                           Python 3.1
                    </li>
                    <br>
                    <li>
                            HTML (HTML -5, Canvas)
                    </li>
                    <br>
                    <li>
                            CSS3 (Boot-Strap, Materialize CSS Frameworks)
                    </li>
                    <br>
                    <li>
                            JavaScript (Learning)
                    </li>
                    <br>
                    <li>
                            ExpressJS (Learning)
                    </li><br>
                    <li>
                            Experience with Django Framework
                    </li><br>
                    <li>
                            Knowledge of Git and VCS
                    </li><br>

                </ul>                
                <br>
    <!-- Experience -->
        <h5><b>
            Experience
        </b>
        </h5>
        <p>
            <ul>
                <li>    Currently working as Lead Back-end Developer at ICTS (IntuiComp TeraScience) under
                        guidance of IIT-Delhi and Dr. Arpan Kar. Developing a Learning Management system for
                        machine learning students and professionals alike to take part in and avail lectures and
                        conduct hackathons globally. Has been successfully launched in Afghanistan, Hong-Kong,
                        France. [<a href="www.icts-learninganalytics.com">www.icts-learninganalytics.com</a>] (2018-present)
                </li>
                <br>
                <li>
                        Working as Lead-developer for a trading firm in creating proprietary software using MQL4
                        on MT4 and Uniglobe platform(2017-present)
                </li>
                <br>
                <li>
                        Created RESTful API and website for an Android application focusing on decreasing Smoking
                        Addiction in individuals by positive reinforcement. It used Django framework and we created
                        our own local server.
                </li>
                <br>
                <li>
                        Made a working Hospital-Management DBMS (Database Management system) for 3rd
                        Semester project. It was created using JDBC in Netbeans IDE.
                </li>
                <br>
                <li>
                        Made an Android application to maintain attendance for college students. Developed in
                        native android
                </li>
                <br>
                <li>
                        Came in top 100 teams in SE- Asia region in ACM-ICPC online qualifier round.
                </li>
            </ul>
        </p>

        <!-- Academics -->
        <h5><b>
                Academic Achievements
            </b>
            </h5>
            <ul>
                    <li>Qualified for ACM-ICPC Regionals 2018-19 at IIT Kharagpur and Kanpur
                    </li>
                    <br>
                    <li>
                            Secured AIR- 2412 rank in JEE Mains.
                    </li>
                    <br>
                    <li>
                            Top 10% of College Department (COE)
                    </li>
                    <br>
                    <li>
                            Top 10% in CBSE class 12th result
                    </li>
                    <br>
                    <li>
                            10 CGPA in class 10th
                    </li>
                    <br>
                    <li>
                            Secured and qualified as a JSTSE scholar from State of New Delhi
                    </li>
                </ul>

    </div>


</body>
</html>

我的 main.css

.intro
{
    background-color: #f5d7f8;
    margin-left: 64px;
    margin-right: 64px;
    font-size: 23px;
    margin-top: 50px;
    padding-left: 64px;
    padding-right: 64px;
    padding-bottom: 30px;
    padding-top:35px;
}
.rcorners1 {
    border-radius: 25px;

    padding: 20px;

  }
  .rcorners2 {
    border-radius: 12px;

    padding: 15px;

  }
  @font-face { font-family: Raleway; src: url('text/Raleway/Raleway-Light.TTF'); }

  @font-face { font-family: Open-sans; src: url('text/open-sans/OpenSans-Regular.TTF'); }
.parallax {

    background-image: url("images/laptop.jpg"); opacity: 0.75;
    min-height: 650px; 
    background-attachment: fixed;
    background-position: center;
    width:100%;
    height:100%;
    background-repeat: no-repeat;
    background-size: cover;


  }

  .text-pri{
 background-color:whitesmoke;

  }
  body {    
    margin: 0 !important;
    padding: 0 !important;
}
.center {
    position: absolute;
    left:30%;
    top: 40%;
    width: 40%;
    min-width: 300px;
    text-align: center;
    background-color: black;
    color: white;
    opacity: 0.85;
    font-size: 48px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .topbar{
      color:white;position: relative;
      padding-top: 30px;

      margin-top:30px;
      margin-left:30px;
      font-size: 20px;

  }

我的 git 仓库(如果需要)

https://github.com/codesniper99/Portfolio

【问题讨论】:

  • 请大家帮忙

标签: html css web fonts


【解决方案1】:

您的本地目录的根目录和您的 github 页面可能不同,您可以尝试使用以 ./ 开头的相对路径

src: url('./text/Raleway/Raleway-Light.TTF')

【讨论】:

  • 你也可以试试../
【解决方案2】:

使用Raleway google font 我已将Raleway 字体导入css,因此您无需从任何地方调用。并将其用作font-family: 'Raleway', sans-serif; 使用在线字体对您的网站有好处。

也可以使用 font-wight css 来制作字体 bold lightfont-weight:200 , font-weight:300 , font-weight:600 与导入的 css 相同。

      @import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
    .intro
{
    background-color: #f5d7f8;
    margin-left: 64px;
    margin-right: 64px;
    font-size: 23px;
    margin-top: 50px;
    padding-left: 64px;
    padding-right: 64px;
    padding-bottom: 30px;
    padding-top:35px;
}
.rcorners1 {
    border-radius: 25px;

    padding: 20px;

  }
  .rcorners2 {
    border-radius: 12px;

    padding: 15px;

  }
  /* @font-face { font-family: Raleway; src: url('text/Raleway/Raleway-Light.TTF'); }

  @font-face { font-family: Open-sans; src: url('text/open-sans/OpenSans-Regular.TTF'); } */
.parallax {

    background-image: url("https://codesniper99.github.io/Portfolio/images/laptop.jpg"); opacity: 0.75;
    min-height: 650px; 
    background-attachment: fixed;
    background-position: center;
    width:100%;
    height:100%;
    background-repeat: no-repeat;
    background-size: cover;


  }

  .text-pri{
 background-color:whitesmoke;

  }
  body {    
    margin: 0 !important;
    padding: 0 !important;
}
.center {
    position: absolute;
    left:30%;
    top: 40%;
    width: 40%;
    min-width: 300px;
    text-align: center;
    background-color: black;
    color: white;
    opacity: 0.85;
    font-size: 48px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .topbar{
      color:white;position: relative;
      padding-top: 30px;

      margin-top:30px;
      margin-left:30px;
      font-size: 20px;

  }
<!DOCTYPE html>
<!-- copyright akhil vaid if anybody copies this my code is here so good luck 2017UCO1521 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
   
</head>
<body style="color:black"></body>
    <div class="container text-pri" style="font-family:Open-sans; padding: 0%;margin-right: 0%;    ">
     <!-- Header -->
     <div class="parallax">
         <span  class="topbar" > ABOUT</span>
         <span  class="topbar" > &nbsp; &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;&nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;&nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;&nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp; &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;&nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;  SKILLS</span>
         <span  class="topbar" > &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;EXPERIENCE</span>
         <span  class="topbar" > &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;ACHIEVEMENTS</span>
         <span  class="topbar" > &nbsp;  &nbsp;  &nbsp;  &nbsp;  &nbsp;CONTACT ME</span>
        <span class="center rcorners2 " style="font-family: 'Raleway', sans-serif;font-size: 4.0em;"> 
           <span style="color: #E04343;">A</span><span >KHIL</span> 
           <span style="color: #FFE800;">V</span><span>AID</span> 
        </span>
     </div>  

        <!-- Introduction -->
        <div class="intro rcorners1">
            <h3 style="text-align: center;">ABOUT ME</h3><br>
        <p>
                I'm a second year Under-graduate student currently pursuing Computer Science and Engineering at
                NSIT, New Delhi, India. I'm new to the industry and keen to expand my skill set.<br> <br> I have a curiosity in
                the field of Web Development and Competitive Programming and using it to solve real world
                problems and am willing to take up opportunities to delve into it.
                <br>
                <br>

        </p>
        </div>
        <!-- Skills -->
        <h5><b>
                Skills and Technologies
            </b>
            </h5>
            <ul>
                    <li>C++ (GNU 14.2), C
                    </li>
                    <br>
                    <li>
                            Java
                    </li>
                    <br>
                    <li>
                           Python 3.1
                    </li>
                    <br>
                    <li>
                            HTML (HTML -5, Canvas)
                    </li>
                    <br>
                    <li>
                            CSS3 (Boot-Strap, Materialize CSS Frameworks)
                    </li>
                    <br>
                    <li>
                            JavaScript (Learning)
                    </li>
                    <br>
                    <li>
                            ExpressJS (Learning)
                    </li><br>
                    <li>
                            Experience with Django Framework
                    </li><br>
                    <li>
                            Knowledge of Git and VCS
                    </li><br>

                </ul>                
                <br>
    <!-- Experience -->
        <h5><b>
            Experience
        </b>
        </h5>
        <p>
            <ul>
                <li>    Currently working as Lead Back-end Developer at ICTS (IntuiComp TeraScience) under
                        guidance of IIT-Delhi and Dr. Arpan Kar. Developing a Learning Management system for
                        machine learning students and professionals alike to take part in and avail lectures and
                        conduct hackathons globally. Has been successfully launched in Afghanistan, Hong-Kong,
                        France. [<a href="www.icts-learninganalytics.com">www.icts-learninganalytics.com</a>] (2018-present)
                </li>
                <br>
                <li>
                        Working as Lead-developer for a trading firm in creating proprietary software using MQL4
                        on MT4 and Uniglobe platform(2017-present)
                </li>
                <br>
                <li>
                        Created RESTful API and website for an Android application focusing on decreasing Smoking
                        Addiction in individuals by positive reinforcement. It used Django framework and we created
                        our own local server.
                </li>
                <br>
                <li>
                        Made a working Hospital-Management DBMS (Database Management system) for 3rd
                        Semester project. It was created using JDBC in Netbeans IDE.
                </li>
                <br>
                <li>
                        Made an Android application to maintain attendance for college students. Developed in
                        native android
                </li>
                <br>
                <li>
                        Came in top 100 teams in SE- Asia region in ACM-ICPC online qualifier round.
                </li>
            </ul>
        </p>

        <!-- Academics -->
        <h5><b>
                Academic Achievements
            </b>
            </h5>
            <ul>
                    <li>Qualified for ACM-ICPC Regionals 2018-19 at IIT Kharagpur and Kanpur
                    </li>
                    <br>
                    <li>
                            Secured AIR- 2412 rank in JEE Mains.
                    </li>
                    <br>
                    <li>
                            Top 10% of College Department (COE)
                    </li>
                    <br>
                    <li>
                            Top 10% in CBSE class 12th result
                    </li>
                    <br>
                    <li>
                            10 CGPA in class 10th
                    </li>
                    <br>
                    <li>
                            Secured and qualified as a JSTSE scholar from State of New Delhi
                    </li>
                </ul>

    </div>


</body>
</html>

【讨论】:

  • 感谢导入工作正常!是的,我应该进口!
猜你喜欢
  • 1970-01-01
  • 2017-05-21
  • 2021-06-18
  • 1970-01-01
  • 2017-10-08
  • 2021-10-24
  • 1970-01-01
  • 2019-10-31
  • 1970-01-01
相关资源
最近更新 更多