웹 (@ font-face) 글꼴 작업

나는 디자인 분야에서 더 많이 언급 할 것이지만 여전히 웹 프로그래밍이라는 기본적인 질문을 가지고 있습니다.웹 (@ font-face) 글꼴 작업

제 웹 응용 프로그램에서 Palatino-Linotype 글꼴을 사용해야한다고 가정 해 봅시다. 내 웹 페이지 응용 프로그램에 어떻게 포함시키는 것이 더 좋습니까?

내 방법 :
1) font.com으로 이동하여 모든 종류의 palatino-linotype : 일반, 굵게, 기울임 꼴, 기울임 꼴체를 구입하십시오. 4 가지 파일.
2) 그럼 난

@font-face { 
    font-family: "Palatino-Linotype-normal"; 
    src: "..." 
} 
@font-face { 
    font-family: "Palatino-Linotype-italic"; 
    src: "..." 
}

3) AI는 HTML 마크 업에 내가 명시 적으로 (이 굵게, 기울임, 기울임 - 굵게 만들 수있는 요소의 글꼴을 설정 필요, 4 개 가지 글꼴이 fontface 스타일을 통해 글꼴을로드 내가 가장 좋아하지 않는 것).

질문 :
1) 맞춤 웹 글꼴을 사용하는 워크 플로 란 무엇입니까?
2) 부모 요소에 하나의 글꼴 만 설정하고 내부 집합에 대해서만이 글꼴을 일반 글꼴로 처리하는 방법이있을 수 있습니다. style = "font-style : italic;" 나는 그들이 이탤릭체가되기를 바란다.
3) 성능에 대한 질문, 웹 글꼴 렌더링 속도가 일반적인 글꼴 렌더링과 다른가요?

출처

2012-11-30 WHITECOLOR

거기에 필자는, 당신은 _ 반드시 _ 사용 대체 글꼴의 (3 충분 아마 좋은) 렌더링 차이가없는 것을하고 :

더 inforamtion에 내 블로그이 링크 를 따라 고품질 글리프를 찾기가 어렵습니다 (웹 폰트의 크기를 조정하면 일반적으로 좋지 않습니다). 내 방법은 당신과 약간 다르다. 내가 가지고있는 형식의 글꼴을 사용한다. (대부분의 웹 사이트는 매월 공짜로 가지고있다. 나는 콜렉션을 가지고있다.) 브라우저 간 형식을 생성하기 위해 온라인 변환기를 사용한다. –

+0

'@ font-face '를 사용할 때 성능에 차이가 있습니다. 왜냐하면 사용자가 자신의 컴퓨터에 글꼴을 가지고 있지 않으면 서버에서 다운로드되어 클라이언트에 렌더링되기 때문입니다. – Jrod

+0

네,하지만 그들은 렌더링 시간 차이에 대해 질문했습니다 ... –

일반적으로 브라우저에서 지원하는 논리적 방법은, <em>을

@font-face { 
    font-family: foobar; 
    src: url("foobar-regular.woff"); 
} 
@font-face { 
    font-family: foobar; 
    font-style: italic; 
    src: url("foobar-italic.woff"); 
}

같이 별도의 규칙 각 서체를 선언하고 단지 font-family: foobar를 선언 <i> 통해 직접 또는 indirectely font-style: italic을 사용하는 것이고, 다른 이탤릭체로 표시된 기본 렌더링을 일으키는 마크 업.

명백한 방식으로 코드를 단순화했습니다. 자연스럽게 일반적으로 브라우저에서 인식 할 수있는 다른 형식으로 글꼴을 사용할 수 있도록해야합니다.

FontSquirrel과 같은 서비스는 다른 코드를 생성하지만 코드가 생성하는 코드를 수정하거나 코드를 처음부터 작성하는 것은 매우 간단합니다.

저는 "foobar"가 아닌 "Palatino Linotype"을 의도적으로 사용했습니다. 왜냐하면 후자는 다운로드 가능한 글꼴로 합법적으로 사용할 수 없기 때문입니다. 적어도 이것이 다른 것으로 증명 될 때까지 가정하는 것입니다. (웹에 불법으로 글꼴을 배포하거나 판매하는 사이트가 많이 있습니다.)

출처

2012-11-30 17:04:25

대단히 고마워, 내가 알 필요가있는 것 같다. – WHITECOLOR

Fontsquirrel http://www.fontsquirrel.com/을 확인하면 여러 브라우저에서 사용할 수있는 글꼴 및 CSS가 호환됩니다.

출처

2012-11-30 14:22:32 Ogelami

아시다시피, 일부 웹 글꼴의 다양한 스타일 (일반, 굵게, 기울임 꼴)을 하나의 글꼴로 결합하는 방법이 있습니까? 요소에 굵게 표시된 Palatino Linotype을 굵은 스타일로 설정할 수 있습니까? – WHITECOLOR

Palatino Linotype Normal 만 사용하고 CSS에서 굵게 변경하면 Palatino Linotype Bold와 같은 결과를 얻지 못합니다. 여기에있는 것은 브라우저 렌더링이이를 구현하는 데 사용되며 많은 것을 빨아 먹을 것입니다. 내 말은, 아마 당신을 위해 아마 똑같이 보일 것입니다. 그러나 디자이너는 아닙니다.

또한 일반, 굵게 및 기울임 꼴보다 더 많은 글꼴이 있습니다. 빛, 반투명, 흑색 등이 있습니다. 그리고 디자이너들은 그걸 많이 사용하는 경향이 있습니다.

일반적으로 첫 번째 질문과 두 번째 질문에 대해 서로 다른 스타일을 다른 글꼴로 사용하고 다른 스타일을 다른 얼굴로 사용하지 않으려면 다른 글꼴 패밀리 표시가 필요합니다.

제 3의 경우 : 퍼포먼스가 임베드 된 폰트의 문제점이다. 그러나 대부분은 렌더링 때문에가 아니라 폰트 파일이 무거워 다운로드하기가 쉽기 때문입니다. 따라서 캐시하고 필요한 것만 사용해야합니다. 예를 들어 http://www.fontsquirrel.com/은 이전 대답에서 기본적으로 실제로 기본적으로 다운로드되는 파일이 너무 많아서 다른 형식 및 포함 할 내용에 대해 조금만 조사하면됩니다.

출처

2012-11-30 14:28:18 povilasp

"Palatino Linotype Normal 만 사용하고 CSS에서 굵게 변경하면 Palatino Linotype Bold와 같은 결과를 얻지 못합니다." 네, 제 질문에 대해 썼습니다. 그러나이 글꼴을 결합하는 방법이있을 수 있으며, 굵은 팔라티노 라이노 타이프를 요소에 과감하게 적용 할 수 있습니까? – WHITECOLOR

하지만이 글꼴을 결합하여 요소에 대담한 스타일을 설정하는 대담한 Palatino Linotype을 만들 수있는 방법이 있습니까? 간단히 말해서, 아니지만, 아마 접근하는 가장 좋은 방법은 .bold, .italic 등과 같은 CSS 클래스를 사용하여 적절하게 적용하는 것입니다. – povilasp

답변 해 주셔서 감사합니다. -) – WHITECOLOR

웹 응용 프로그램에서 Palatino-Linotype 글꼴을 사용하는 경우 Google에서 웹 글꼴을 사용합니다. https://developers.google.com/webfonts/docs/webfont_loader

웹 글꼴 로더는 Google 웹 글꼴 API가 제공하는 것보다 글꼴로드를 제어 할 수있는 JavaScript 라이브러리입니다. Web Font Loader를 사용하면 여러 웹 글꼴 공급자를 사용할 수 있습니다. Google과 Type Kit가 공동 개발했습니다. http://webtemplatesmonster.blogspot.in/2013/02/how-to-use-font-face.html

@font-face { font-family: 'Awesome Font'; src: 
     url('awesome-font.eot'); /* IE9 Compat Modes */ src: 
     url('awesome-font.eot?#iefix') format('embedded-opentype'), /* 
     IE6-IE8 */ 
       url('awesome-font.woff') format('woff'), /* Modern Browsers */ 
       url('awesome-font.ttf') format('truetype'), /* Safari, Android, iOS */ 
       url('awesome-font.svg#svgFontName') format('svg'); /* Legacy iOS */ }

출처

2013-02-06 11:34:06 raju

웹 (@ font-face) 글꼴 작업

답변

관련 문제