Google 글꼴을 사용하여 CSS를 통해 글꼴 변경

무료 서식 파일에서 내 글꼴을 변경하려고합니다. 오프라인 상태입니다. 아래에서 내 목록에 HTML을 볼 수 있습니다.Google 글꼴을 사용하여 CSS를 통해 글꼴 변경

header { 
    width: 360px; 
    float: left 
} 
#menu { 
    padding-top: 122px 
} 
#menu > li { 
    width: 100%; 
    overflow: hidden; 
    padding-bottom: 4px 
} 
#menu > li > a { 
    display: inline-block; 
    font-size: 26px; 
    line-height: 54px; 
    height: 56px; 
    color: #fff; 
    background: #000; 
    text-decoration: none; 
    position: relative; 
    letter-spacing: 0px; 
    cursor: pointer 
} 
#menu > li > a span { 
    display: block; 
    background: #fff; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0 
} 
#menu > li > a strong { 
    position: relative; 
    display: block; 
    padding: 0 95px 0 40px; 
    height: 56px 
} 
#menu > li > a:hover, 
#menu > li > a.active { 
    color: #000 
} 
#menu > li > a:hover strong, 
#menu > li > a.active strong {}

지금, 나는 프로 소스 산세, 구글에서 가져 오기로 글꼴을 변경하려면 :

<header> 
    <h1><a href="index.html" id="logo"></a></h1> 
     <nav> 
      <ul id="menu"> 
       <li><a href="#!/page_Home"><span></span><strong>Home Page</strong></a></li> 
       <li><a href="#!/page_About"><span></span><strong>About</strong></a></li> 
       <li><a href="#!/page_Portfolio"><span></span><strong>Portfolio</strong></a></li> 
       <li><a href="#!/page_Services"><span></span><strong>My Services</strong></a></li> 
       <li><a href="#!/page_Contact"><span></span><strong>Contact</strong></a></li> 
      </ul> 
     </nav> 
</header>

아래 목록에 대한 CSS입니다. 그러나, 나는 그것을 작동시키지 못했습니다. 그래서 대신 기본 글꼴을 사용하여 글꼴의 Google 가져 오기를 망칠 지 여부를 확인했지만 작동하지 않았습니다. ! 다음, 당신은이 문제를 해결하는 나의 시도 볼 수 있습니다 : 나는 중요한의 인라인 스타일 덮어 쓰기 방지되어 있는지 확인했습니다

#menu > li > a { 
    font-family: "Times New Roman"; 
    display: inline-block; 
    font-size: 26px; 
    line-height: 54px; 
    height: 56px; 
    color: #fff; 
    background: #000; 
    text-decoration: none; 
    position: relative; 
    letter-spacing: 0px; 
    cursor: pointer 
}

을하지만, 어떤 CSS 스타일 아무도 없다.

요약하려면 인라인 CSS 스타일을 사용하지만 실패한 글꼴을 변경하려고합니다. 누구든지 도와 줄 수 있습니까?

출처

2017-02-28 Shaun Cockram

없습니다 작품

희망 Source Sans Pro 또는 모든 ex의 사용을 나타냅니다. ternal 글꼴. 아마도 [문서] (https://developers.google.com/fonts/docs/getting_started)를 읽어야합니다. –

마이크에 대한 응답으로, 당신은 정확합니다. 나는 더 분명해야했다. 가져 오기를 시작하기 전에 기본 글꼴로 먼저 작업 할 수 있기를 원합니다. 내가 의미하는 바를 알면 개인 학습을위한 한 걸음 씩 나아가십시오. 너무 분명하지 않아서 미안해. –

@CRover는 아래 답변에 대한 의견을 참고하십시오. –

먼저 head에서 Google로부터받은 Source Sans Pro 글꼴에 link 글꼴을 추가하십시오. 이

font-family: 'Source Sans Pro', sans-serif;

추가 또는 사용자가 제공 한 @import 구글을 사용하려고 할 수 있습니다 css에 구글

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pr‌o" rel="stylesheet">

에서받은됩니다. 당신의 html의 머리에서

<style> 
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro'); 
</style>

다음 글꼴 - 가족을 추가

font-family: 'Source Sans Pro', sans-serif;

header { 
 
    width: 360px; 
 
    float: left 
 
} 
 
#menu { 
 
    padding-top: 122px 
 
} 
 
#menu > li { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    padding-bottom: 4px 
 
} 
 
#menu > li > a { 
 
    display: inline-block; 
 
    font-size: 26px; 
 
    line-height: 54px; 
 
    height: 56px; 
 
    color: #fff; 
 
    background: #000; 
 
    text-decoration: none; 
 
    position: relative; 
 
    letter-spacing: 0px; 
 
    cursor: pointer 
 
} 
 
#menu > li > a span { 
 
    display: block; 
 
    background: #fff; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0 
 
} 
 
#menu > li > a strong { 
 
    position: relative; 
 
    display: block; 
 
    padding: 0 95px 0 40px; 
 
    height: 56px 
 
} 
 
#menu > li > a:hover, 
 
#menu > li > a.active { 
 
    color: #000 
 
} 
 
#menu > li > a:hover strong, 
 
#menu > li > a.active strong {} 
 
#menu > li > a { 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    display: inline-block; 
 
    font-size: 26px; 
 
    line-height: 54px; 
 
    height: 56px; 
 
    color: #000; 
 
    background: #000; 
 
    text-decoration: none; 
 
    position: relative; 
 
    letter-spacing: 0px; 
 
    cursor: pointer 
 
}

<html> 
 
<head> 
 
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> 
 
</head> 
 
<body> 
 
<header> 
 
    <h1><a href="index.html" id="logo"></a></h1> 
 
     <nav> 
 
      <ul id="menu"> 
 
       <li><a href="#!/page_Home"><span></span><strong>Home Page</strong></a></li> 
 
       <li><a href="#!/page_About"><span></span><strong>About</strong></a></li> 
 
       <li><a href="#!/page_Portfolio"><span></span><strong>Portfolio</strong></a></li> 
 
       <li><a href="#!/page_Services"><span></span><strong>My Services</strong></a></li> 
 
       <li><a href="#!/page_Contact"><span></span><strong>Contact</strong></a></li> 
 
      </ul> 
 
     </nav> 
 
</header> 
 
</body> 
 
</html>

이 여기에 제시된 코드에서 아무것도

출처

2017-02-28 19:54:50

불행히도 작동하지 않았습니다. 아래에서 내가 시도한 것을 볼 수 있습니다. HTML : http://pastebin.com/k906PkBx CSS : http://pastebin.com/GFX4ER7t CSS 변경 사항 35 행을 봅니다. –

올바른 장소에 글꼴을 넣고 있는지 확인하고 Google 글꼴을 사용하는 동안 온라인 상태인지 확인하십시오 –

온라인을 의미 할 때 인터넷 연결이 정확합니까? 글꼴의 위치에 관해서는, 나는 점검했고 그것은 바른 장소에있는 것으로 보인다. –

Google 글꼴을 사용하여 CSS를 통해 글꼴 변경

답변

관련 문제