CSS 파일에만 액세스 할 수있는 CMS로 작업하고 있습니다. 따라서 문서의 머리 부분에 아무것도 포함시킬 수 없습니다. CSS 파일 내에서 웹 글꼴을 가져 오는 방법이 있는지 궁금합니다.
답변
@import방법을 사용하십시오 :
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');분명히 “Open Sans”( Open+Sans)는 가져온 글꼴입니다. 따라서 당신의 것으로 교체하십시오. 글꼴 이름에 여러 단어가있는 경우을 추가하여 URL을 인코딩하십시오.+ 각 단어 사이 부호 .
배치하십시오 @import규칙 앞에 CSS를 맨 위에 .
Google Fonts는 자동으로 @import지시문을 생성 할 수 있습니다. 글꼴을 선택한 후 (+)옆에 있는 아이콘을 클릭하십시오 . 왼쪽 하단에 “1 Family Selected”라는 제목의 컨테이너가 나타납니다. 클릭하면 확대됩니다. “사용자 정의”탭을 사용하여 옵션을 선택한 다음 “내장”으로 다시 전환하고 “내장 글꼴”에서 “@ 가져 오기”를 클릭하십시오. <style>태그 사이에 CSS를 스타일 시트에 복사하십시오 .
답변
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" />@import를 사용하지 않는 것이 좋습니다. 위와 같이 레이아웃 헤드에 링크 요소를 사용하십시오.
답변
글꼴 ttf / 기타 형식 파일을 다운로드 한 후 다음 CSS 코드 예제를 추가하십시오.
@font-face { font-family: roboto-regular;
src: url('../font/Roboto-Regular.ttf'); }
h2{
font-family: roboto-regular;
}답변
CSS 파일에 아래 코드를 추가하여 Google 웹 글꼴을 가져옵니다.
@import url(https://fonts.googleapis.com/css?family=Open+Sans);Open + Sans 교체 글꼴 이름을 가진 매개 변수 값을.
CSS 파일은 다음과 같아야합니다.
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body{
font-family: 'Open Sans',serif;
}답변
- https://fonts.google.com/으로 이동 하십시오.
- + 를 클릭하여 글꼴 추가
- 선택한 글꼴> 포함> @IMPORT> URL 복사로 이동하여 .css 파일에 body 태그 위에 붙여 넣습니다.
- 끝났다.
답변
@import 태그를 사용하십시오.
@import url('http://fonts.googleapis.com/css?family=Kavoon');답변
위의 답변과 함께이 사이트도 고려하십시오.
https://google-webfonts-helper.herokuapp.com/fonts
이점:
-
더 나은 응답 시간을 위해 Google 글꼴을 자체 호스팅 할 수 있습니다
-
서체를 선택하십시오
- 캐릭터 세트를 선택하십시오
- 서체 스타일 / 무게를 선택하십시오
- 대상 브라우저를 선택하십시오
- 그리고 CSS 스 니펫 (css 스타일 시트에 추가)과 프로젝트에 포함 할 글꼴 파일의 zip을 얻습니다.
예 : your_theme.css
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'),
url('css_fonts/open-sans-v15-latin-regular.woff2') format('woff2'),
url('css_fonts/open-sans-v15-latin-regular.woff') format('woff');
}
body {
font-family: 'Open Sans',sans-serif;
}