구 글 apiGoogle 글꼴 API

구 글 api
Google recently debuted a new web service called the Font API.  Google's Font API provides developers a means by which they may quickly and painlessly add custom fonts to their website.  Let's take a quick look at the ways by which the Google Font API can be used.
Google 은 최근 Font API 라 는 새로운 네트워크 서 비 스 를 출시 했 습 니 다.Google 의 Font API 는 개발 자 들 이 웹 사이트 에 사용자 정의 글꼴 을 빠 르 고 쉽게 추가 할 수 있 는 방법 을 제공 합 니 다.Google Font API 사용 방식 을 빠르게 살 펴 봅 시다.
데모 보기 데모 보기
글꼴 요청 형식 (글꼴 요청 형식)
Many of the fonts within Google's font archive are available not only in standard format but also in Italic, Bold, and Italic Bold.  The format for requesting a given font variant is:
Google 글꼴 파일 라 이브 러 리 의 많은 글꼴 은 표준 형식 뿐만 아니 라 Italic, Bold, Italic Bold 도 사용 할 수 있 습 니 다.주어진 글꼴 변 체 를 요청 하 는 형식 은: {font}:{variant1},{variant2} Here are a few examples of requesting each variant:
다음은 모든 변 체 를 요청 하 는 예제 입 니 다. Cantarell Cantarell:bold Cantarell:italic Cantarell:bolditalic Now let's see how we can include special fonts in our page and use these them.
이제 페이지 에 특수 한 글꼴 을 포함 하고 사용 하 는 방법 을 살 펴 보 자.
CSS 스타일 시트 방법 (CSS 스타일 시트 방법) The stylesheet gets included into the page like any other stylesheet would be.  A query string with a family parameter is appended to the stylesheet's URL containing the font(s) to be loaded.  Multiple fonts can be requested with the use of the "|" (pipe) character.  A few examples:
스타일 시트 는 다른 스타일 시트 처럼 페이지 에 포 함 됩 니 다.Family 인자 가 있 는 검색 문자열 은 스타일 시트 의 URL 에 추 가 됩 니 다. 이 URL 은 불 러 올 글꼴 을 포함 합 니 다."|" 을 사용 하면 여러 글꼴 (파이프) 문 자 를 요청 할 수 있 습 니 다.몇몇 예: Take a moment to examine the stylesheet from Google:
Google 스타일 시트 를 확인 하 는 데 시간 이 좀 걸 립 니 다. @font-face { font-family: 'IM Fell Great Primer'; font-style: normal; font-weight: normal; src: local('IM Fell Great Primer'), url('http://themes.googleusercontent.com/font?kit=AL8ALGNthei20f9Cu3e93rvDyRCRMn38Ifm6ee4fjno') format('truetype'); } @font-face { font-family: 'Vollkorn'; font-style: normal; font-weight: normal; src: local('Vollkorn'), url('http://themes.googleusercontent.com/font?kit=_3YMy3W41J9lZ9YHm0HVxA') format('truetype'); } The @font-face method of font embedding is Google's chosen method.  Using the font is as simple as using a system font:
글꼴 에 포 함 된 @ font - face 방법 은 Google 이 선택 한 방법 입 니 다.글꼴 사용 은 시스템 글꼴 사용 처럼 간단 합 니 다: .mySpecialFontClass { font-family:'Vollkorn', serif; } You may also embed the font within the "style" attribute of a given element:
주어진 요소 의 "style" 속성 에 글꼴 을 삽입 할 수 있 습 니 다:

Lorem ipsum....

I t doesn't get more painless than that.
이보다 더 쉬 운 것 은 없다.
단순 자 바스 크 립 트 방법 (단순 자 바스 크 립 트 방법)
Google also provides a simple JavaScript method for including custom fonts within a page.  This method requires including the JSAPI JavaScript file and a very small snippet of JavaScript:
Google 은 페이지 에 사용자 정의 글꼴 을 포함 하 는 간단 한 JavaScript 방법 도 제공 합 니 다.이 방법 은 JSPI JavaScript 파일 과 JavaScript 코드 를 포함 해 야 합 니 다. google.load('webfont','1'); google.setOnLoadCallback(function() { WebFont.load({ google: { families: ['Tangerine','Cantarell'] } }); }); Selecting font variants is done with a simple ":" delimiter between the font and the variant:
글꼴 과 변형 사이 에 간단 한 ":" 경계 부 호 를 사용 하여 글꼴 변 체 를 선택 하 십시오: WebFont.load({ google: { families: ['Tangerine:bold'] } }); You may also load multiple fonts within the families array:
family 배열 에 여러 글꼴 을 불 러 올 수 있 습 니 다: WebFont.load({ google: { families: ['Tangerine:bold','Cantarell','Lobster'] } }); Simple, no?  If it's too simple for you, there's more advanced method.
간단 하지 않 습 니까?당신 에 게 너무 간단 하 다 면 더 높 은 방법 이 있 습 니 다.
고급 자 바스 크 립 트 방법 (고급 자 바스 크 립 트 방법)
The advanced JavaScript method employes an async JavaScript method paired with a WebFontConfig object.  The advanced method also adds callbacks for font requests:
고급 JavaScript 방법 은 WebFontConfig 대상 과 짝 을 이 루 는 비동기 JavaScript 방법 을 사용 합 니 다.고급 방법 은 글꼴 요청 에 리 셋 을 추가 합 니 다: WebFontConfig = { google: { families: [ 'Tangerine', 'Cantarell' ] }, /* Called when all the specified web-font provider modules (google, typekit, and/or custom) have reported that they have started loading fonts. */ loading: function() { // do something }, /* Called when each requested web font has started loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */ fontloading: function(fontFamily, fontDescription) { // do something }, /* Called when each requested web font has finished loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */ fontactive: function(fontFamily, fontDescription) { // do something }, /* Called if a requested web font failed to load. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */ fontinactive: function(fontFamily, fontDescription) { // do something }, /* Called when all of the web fonts have either finished loading or failed to load, as long as at least one loaded successfully. */ active: function() { // do something }, /* Called if the browser does not support web fonts or if none of the fonts could be loaded. */ inactive: function() { // do something } }; /* async! */ (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); If you're like me, you loooooooove JavaScript callbacks.  You would use this method if you wanted to "preload" fonts before assigning fonts to specific elements. What's also great about this method is that Google uses "active" and "inactive" CSS class representations on the HTML element to designate what an element's settings should be before and after a font has been loaded:
저 를 닮 았 다 면 자 바스 크 립 트 리 셋 을 늦 출 수 있 습 니 다.특정 요소 에 글꼴 을 할당 하기 전에 '미리 불 러 오기' 글꼴 을 사용 하려 면 이 방법 을 사용 할 수 있 습 니 다.이 방법의 장점 은 Google 이 HTML 요소 에 '이벤트' 와 '비활성' CSS 클래스 를 사용 하여 글꼴 을 불 러 오기 전과 이후 요소 의 설정 을 다음 과 같이 지정 하 는 것 입 니 다. .wf-inactive p { /* Show paragraphs in serif font until fonts have loaded. */ font-family: serif } .wf-active p { /* Show paragraphs in Tangerine when the fonts have loaded. */ font-family: 'Tangerine', serif } .wf-inactive h1 { /* Show heading in serif font until fonts have loaded. */ font-family: serif; font-size: 16px } .wf-active h1 { /* Show heading in Cantarell when the fonts have loaded. */ font-family: 'Cantarell', serif; font-size: 16px } Unfortunately you need to add these directives to you stylesheet; I prefer not to.
불 행 히 도 이 명령 들 을 스타일 시트 에 추가 해 야 합 니 다.싫 습 니 다.
데모 보기 데모 보기
What do you think of Google latest JavaScript API?  On one side I see the Font API as extremely useful but the other side of me sees Google trying to grab a stronger hold of the Web;  trying to make websites dependent upon them.  What are your thoughts?
Google 최신 JavaScript API 를 어떻게 보 십 니까?한편 으로 는 Font API 가 매우 유용 하 다 고 생각 하지만 다른 한편 으로 는 Google 이 네트워크 의 기반 을 선점 하려 고 한다 고 생각 합 니 다.사 이 트 를 그들 에 게 의존 시 키 려 고 시도 하 다.어떻게 생각 하 세 요?뭐 공부 해요?
번역https://davidwalsh.name/google-fonts-api
구 글 api