Google 글꼴 다운로드 및 이 글꼴을 사용하는 오프라인 사이트 설정

Google 글꼴 다운로드 및 이 글꼴을 사용하는 오프라인 사이트 설정

템플릿이 있는데 다음과 같은 Google 글꼴에 대한 참조가 있습니다.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>

어떻게 하면 항상 오프라인으로 실행되는 내 페이지에서 사용할 수 있도록 다운로드하고 설정할 수 있습니까?

Google 웹 글꼴 도우미를 확인하십시오.

구글의 모든 웹 폰트를 다운로드하고 구현을 위한 CSS 코드를 제안할 수 있습니다.또한 이 도구를 사용하면 번거로움 없이 한 번에 모든 형식을 다운로드할 수 있습니다.

구글이 웹 폰트를 호스팅하는 곳을 알고 싶었던 적이 있습니까?이 서비스는 글꼴 변형의 모든 .eot, .woff, .woff2, .svg, .ttf 파일을 Google에서 직접 다운로드하려는 경우 유용할 수 있습니다(일반적으로 사용자 에이전트가 최적의 형식을 결정함).

또한 그들의 Github 페이지를 보세요.

Google 글꼴 - http://www.google.com/fonts/ 으로 이동하여 원하는 글꼴을 모음에 추가한 후 다운로드 버튼을 누릅니다.그런 다음 @fontface를 사용하여 이 글꼴을 웹 페이지에 연결합니다.그런데, 사용 중인 링크를 열면 @fontface를 사용하는 예를 볼 수 있습니다.

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

예를 들어,

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

다운로드한 글꼴 파일의 로컬 링크로 URL 주소를 변경하기만 하면 됩니다.

훨씬 더 쉽게 할 수 있습니다.

링크된 파일을 다운로드하기만 하면 됩니다.

http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300

open sans.css 등으로 이름을 지정합니다.

그런 다음 url()의 링크를 글꼴 파일에 대한 경로로 변경합니다.

그런 다음 예제 문자열을 다음으로 바꿉니다.

<link href='opensans.css' rel='stylesheet' type='text/css'>

이를 달성하기 위한 단계별 방법을 찾았습니다(글꼴 1개).
(2013년 9월 9일 기준)

1. http://www.google.com/fonts 에서 글꼴을 선택합니다.
2. "Add to collection" 파란색 단추를 사용하여 원하는 항목을 컬렉션에 추가합니다.
3. 컬렉션에서 제거 단추 근처의 "모든 스타일 보기" 단추를 클릭하고 '굵은 글씨'와 같은 다른 스타일을 선택했는지 확인합니다.
4. 페이지 오른쪽 아래에 있는 '사용' 탭 버튼을 클릭합니다.
5. 아래쪽 화살표 이미지가 있는 맨 위의 다운로드 버튼을 클릭
6. 팝업 메시지가 나타나면 "zip file"을 클릭합니다.
7. 팝업에서 "닫기" 버튼을 클릭합니다.
8. 3개의 탭 "Standrd|@import|Javascript"가 나타날 때까지 페이지를 천천히 스크롤합니다.
9. "@import" 탭 클릭
10. 「 」 「 」 「 」 「 」 의 URL을 합니다.'url('그리고.')'
11. 새 탭의 주소 표시줄에 복사한 후 이동
12. "File > Save page as..."를 수행하고 이름을 "desiredfontname.css"로 지정합니다(그에 따라 바꾸기).
13. 다운로드한 글꼴 .zip 파일의 압축을 풉니다(.ttf를 압축 해제해야 함).
14. "http://ttf2woff.com/ "으로 이동하여 zip에서 추출된 .ttf를 .woff로 변환합니다.
15. 집desiredfontname.css 그 안에 .'url('그리고.')'].com 에서 변환된 .사용하여 .] ttf2woff.com 의 .woff 파일은 doc_root 파일입니다.
16. 한 후 하여 해당 파일에 하는 파일을 합니다.<link/>HTML 페이지에서 가져오기 위한 CSS 태그
17. 지금부터 이 글꼴을 참조하십시오.font-family의 스타일로 .

바로 그겁니다.왜냐하면 나는 같은 문제를 가지고 있었고 위에 있는 해결책이 나에게 맞지 않았기 때문입니다.

다른 답들은 틀리지 않지만, 저는 이것이 가장 빠른 방법이라는 것을 알았습니다.

1. Google 글꼴에서 zip 파일을 다운로드하여 압축을 풉니다.
2. 글꼴 파일 3을 http://www.fontsquirrel.com/tools/webfont-generator 에 한 번에 업로드합니다.
3. 결과를 다운로드합니다.

결과에는 woff, svg, ttf, eot 등 모든 글꼴 형식이 포함됩니다.

그리고 추가 보너스로 그들은 당신을 위해 css 파일도 생성합니다!

패키지 종속성을 명시적으로 선언하거나 다운로드를 자동화하려면 anpm 패키지를 추가하여 Google 글꼴을 가져와서 로컬에서 서비스할 수 있습니다.

글꼴 소스

글꼴 소스를 사용하면 다음 작업을 수행할 수 있습니다.

깔끔하게 번들된 NPM 패키지의 자체 호스트 오픈 소스 글꼴.

npm을 검색하여 @fontsource/roboto 또는 @fontsource/open-sans와 같은 사용 가능한 글꼴을 검색하고 다음과 같이 설치할 수 있습니다.

$ npm install @fontsource/roboto    --save 
$ npm install @fontsource/open-sans --save 

글꼴 다운로드 프로그램

좀 더 일반적인 사용 사례의 경우 먼저 라이브러리를 설치한 다음 포함할 글꼴 이름과 옵션을 가리키면 두 단계로 글꼴을 전달하는 여러 npm 패키지가 있습니다.

• Google 글꼴 웹 팩 플러그인
• Google 오프라인 글꼴
• Google 글꼴
• Google 글꼴 가져오기

추가 읽기:

• 재료 아이콘을 오프라인으로 호스팅하는 방법은 무엇입니까?
• 전자 앱에서 오프라인 재료 아이콘 및 Roboto 글꼴 사용
• 보관됨:서체

3단계:

1. Google 글꼴에서 사용자 정의 글꼴을 다운로드하고 .vmdk 파일을 다운로드합니다. ex: http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300 을 다운로드하여 예제로 저장합니다.
2. 다운로드한 파일(example.css)을 엽니다.이제 모든 글꼴 파일을 다운로드하여 글꼴 디렉터리에 저장해야 합니다.
3. example.css 편집: 모든 글꼴 파일을 .css 다운로드로 바꿉니다.

예:

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

src: -> url을 보세요.http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2 을 다운로드하여 글꼴 디렉토리에 저장합니다.그런 다음 다운로드한 모든 파일로 URL을 변경합니다.이제 다음과 같이 보일 것입니다.

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}

모든 글꼴에 .css 파일이 포함되어 있습니다. 도움이 되기를 바랍니다.

Google 글꼴을 사용할 때 워크플로우는 "선택", "사용자 정의", "포함"의 3단계로 나뉩니다.자세히 보면, "사용" 페이지의 오른쪽 끝에 현재 컬렉션에 있는 글꼴을 다운로드할 수 있는 작은 화살표가 있습니다.

,되면, ▁the▁using▁is▁it▁regular▁other▁font▁after▁like▁any다▁font▁have됩니,▁를 사용하여 다른 일반 폰트처럼 폰트를 사용하면 됩니다.font-familyCSS 지시문.

기본적으로 프로젝트에 글꼴을 포함하는 것입니다.

@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');

Google 글꼴 이동

글꼴을 선택하면 스타일입니다.

그러면 링크 태그가 표시됩니다. 링크 측면을 클릭하여 가져오기를 클릭합니다.

4. URL('여기서') 안에 있는 링크를 복사하여 브라우저 검색 표시줄에 붙여넣습니다.

5. 그러면 이런 것을 얻게 될 것입니다.

6. 그런 다음 다운로드하여 프로젝트 파일이 있는 곳에 저장합니다!

그런 다음 HTML 링크 태그에 포함하거나 CSS 파일(https://i.stack.imgur.com/NvJ60.jpg) 로 가져옵니다.

그리고 나서 구글 폰트에 언급된 톤 계열을 사용합니다.

저는 duydb의 답변에 따라 이 프로세스를 자동화하는 아래의 파이썬 코드를 생성했습니다.

import requests

with open("example.css", "r") as f:
    text = f.read()
    urls = re.findall(r'(https?://[^\)]+)', text)

for url in urls:
    filename = url.split("/")[-1]
    r = requests.get(url)
    with open("./fonts/" + filename, "wb") as f: 
        f.write(r.content)
    text = text.replace(url, "/fonts/" + filename)

with open("example.css", "w") as f:
        f.write(text)

이것이 복사 붙여넣기 죽음에 도움이 되길 바랍니다.

글꼴을 다운로드하여 로컬에서 참조해야 합니다.

를 CSS 링크에서 하세요.WOFF및 () 을 및필변환으로 합니다.TTF.

그런 다음 변경합니다.CSS로컬로 글꼴을 포함하기 위해 게시한 링크에서.

부터

url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)

로.

url(/path/to/font/font.woff)

Voila! 당신이 해야 할 일이 더 있을지도 모르지만 위의 것들은 기본입니다.이 기사는 조금 더 잘 설명해 줍니다.

글꼴을 다운로드하여 폴더에 압축을 풉니다.그런 다음 해당 글꼴을 연결합니다.아래 코드는 저에게 제대로 작동했습니다.

body { 
  color: #000; 
  font-family:'Open Sans';
  src:url(../../font/Open_Sans/OpenSans-Light.ttf); 
}

언급URL : https://stackoverflow.com/questions/15930003/downloading-a-google-font-and-setting-up-an-offline-site-that-uses-it