programing

구글 웹 폰트를 CSS 파일로 가져오는 방법은?

css3 2023. 9. 27. 18:04

구글 웹 폰트를 CSS 파일로 가져오는 방법은?

저는 CSS 파일에만 접근할 수 있는 CMS로 작업하고 있습니다.가 없어요,다.<head>문서의 CSS 웹 수 이 있는지 .CSS 파일 내에서 웹 폰트를 가져올 수 있는 방법이 있는지 궁금합니다.

방법을 사용합니다.

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

"(, "" (Open Sans)Open+Sans은 가져올 글꼴입니다.그러니까 네 것으로 바꿔요.우 합니다를 합니다.+각각의 단어 사이에 기호를 지정합니다.

합니다.@import당신의 CSS의 가장 높은 부분에서, 어떤 규칙 이전에.

은 Google 를 할 수 .@import지시 사항입니다..(+)옆에 아이콘이 있습니다.왼쪽 하단 모서리에 "1 패밀리 선택"이라는 제목의 컨테이너가 나타납니다.클릭하면 확장됩니다."Customize" 탭을 사용하여 옵션을 선택한 다음 "embed"로 다시 전환하고 "embed Font" 아래의 "@import"를 클릭합니다.합니다 합니다.<style>스타일시트에 태그를 지정합니다.

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;lang=en" />

사용하지 않는 것이 좋습니다.@import . 을 하세요.link위와 같이 레이아웃의 머리에 있는 요소입니다.

글꼴 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://google-webfonts-helper.herokuapp.com/fonts 도 고려해 보십시오.

주요 장점:

  • 더 나은 응답 시간을 위해 구글 폰트를 자체 호스팅할 수 있습니다.

기타 장점:

  • 글꼴을 선택합니다.
  • 캐릭터 세트 선택
  • 글꼴 스타일/무게 선택
  • 대상 브라우저 선택(현대적 선호)
  • CSS 스니펫(CSS 스타일시트에 추가할)과 프로젝트 폴더에 포함할 글꼴 파일 zip(예: css_fonts)을 가져옵니다.

'your_css_theme.css' 파일에 추가

/* open-sans-regular - latin - modern browsers  */
@font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
   src: local(''),
        url('css_fonts/open-sans-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('css_fonts/open-sans-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }

 body { 
        font-family: 'Open Sans',sans-serif;  
 }
  1. https://fonts.google.com/ 로 이동하기만 하면 됩니다.
  2. +를 눌러 글꼴 추가
  3. 선택한 글꼴 > Embed > @IMPRATE > 복사 url로 이동하여 본문 태그 위에 있는 .css 파일에 붙여넣습니다.
  4. 끝났어요.

@import 태그 사용

@import url('http://fonts.googleapis.com/css?family=Kavoon');

@ font-face를 사용하여 URL에 연결할 수도 있습니다. http://www.css3.info/preview/web-fonts-with-font-face/

CMS가 iframe을 지원합니까?컨텐츠의 맨 위에 iframe을 던질 수도 있습니다.이것은 아마 더 느릴 것입니다. CSS에 포함하는 것이 더 좋습니다.

<link href="https://fonts.googleapis.com/css?family=(any font of your 
choice)" rel="stylesheet" type="text/css">

글꼴을 선택하려면 링크를 방문하십시오. https://fonts.google.com

괄호를 제외한 웹사이트에서 선택한 글꼴 이름을 작성합니다.

예를 들어, 선택한 글꼴로 랍스터를 선택한 경우,

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" 
type="text/css">

그러면 일반적으로 HTML/CSS 파일 전체에서 글꼴 패밀리로 사용할 수 있습니다.

예를들면

<h2 style="Lobster">Please Like This Answer</h2>

링크만 통과하면 됩니다.

https://developers.google.com/fonts/docs/getting_started

스타일시트로 가져오는 방법

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

구글 쪽은 2015년 이후로 조금 달라졌습니다.저는 새로운 방법을 포함하는 것으로 생각할 수 있을 정도로 그것을 찾는데 어려움을 겪었습니다.

  1. 원하는 글꼴 페이지에서 아래로 스크롤
  2. 글꼴 이름 옆에 있는 작은 더하기 아이콘을 클릭합니다.
  3. 내장 링크 및 기타 옵션은 웹 페이지 오른쪽에 있는 "selected family" 대화에 표시됩니다.

우리는 css3에서 그것을 쉽게 할 수 있습니다.단순히 @import statement만 사용하면 됩니다.다음 동영상은 그 방법을 쉽게 설명해 주었으니 잘 보세요.

https://www.youtube.com/watch?v=wlPr6EF6GAo

  1. https://fonts.google.com/ 로 이동하여 원하는 글꼴 패밀리를 선택합니다(이름으로 검색 가능).

    Step 1: selecting a font

  2. 원하는 변형(무게, 기울임꼴 등)을 선택합니다.

    Step 2: selecting the variations

  3. 오른쪽 상단 모서리에 있는 View selected family(선택한 패밀리 보기) 버튼을 클릭합니다.

    Step 3: clicking on the view font family button

  4. 오른쪽 패널에서 @import를 선택하여 코드를 가져옵니다.

    Step 4: getting the code

여기 계신 모든 분들이 링크 태그와 @import를 이용해서 답변을 해주셨습니다.프로젝트(html,css) 작업 중에 인터넷 연결이 되어 있으면 잘 됩니다.그러나 '오프라인' 글꼴을 사용하려면 다음 단계를 따릅니다.

  1. 모두 다운로드 옵션을 사용하여 Google 글꼴 웹 사이트에서 원하는 글꼴의 zip 파일을 다운로드합니다.
  2. zip 파일을 추출하면 .ttf 파일을 얻을 수 있습니다.
  3. 스타일에 맞게 css로...
    @font 얼굴의{ font-family: ....... ; src:url(........); }

** 추출된 .ttf 파일에서 사용할 글꼴의 글꼴-패밀리 쓰기 이름 내부이름은 해당 .ttf 파일을 열면 찾을 수 있습니다.

URL 내부에 .ttf 파일의 로컬 경로가 언급되어 있습니다.**

  1. 글꼴을 사용하려면 다음과 같이 하십시오.글꼴 패밀리 속성을 사용하고 그 안에 위 단계에서 사용한 글꼴 이름을 쓰기만 하면 됩니다(열기 .ttf 파일을 사용하여 얻은). 이 글꼴을 전체 웹 페이지에 추가하려면 범용 선택기(*) 내의 글꼴 패밀리 속성을 사용합니다.

언급URL : https://stackoverflow.com/questions/14676613/how-to-import-google-web-font-in-css-file

'programing' 카테고리의 다른 글

Android 맵 API v2로 맞춤형 비트맵 마커를 만드는 방법  (0) 2023.09.27
변경된 청취자 편집 텍스트에서 문자 수 계산  (0) 2023.09.27
시스템 부팅 시 도커 컨테이너가 자동으로 시작되도록 하려면 어떻게 해야 합니까?  (0) 2023.09.27
고투 사용을 피하고 중첩 루프를 효율적으로 끊는 방법  (0) 2023.09.27
동일한 테이블의 다른 여러 행과 관련된 테이블 업데이트 시도  (0) 2023.09.27

'programing'의 다른글

  • 현재글구글 웹 폰트를 CSS 파일로 가져오는 방법은?

관련글

댓글

티스토리툴바