IT를 표현

CSS는 올해 10 년 존재를 완성! CSS를 사용하여 빵 (또는 없음) 수입, 잠시 여기 자들, 그러면 우리가 글꼴의 좋은 선택을 위해 굶주리고있다 방법을 알고 수도 있습니다. 심지어 글꼴의 부족과에서 그 같은 디자이너들이 CSS를 선 가든은 자신의 디자인에 몇 가지 정의를하는 추구 글꼴을 대체할의 CSS 배경 이미지의 사용을 만들었습니다. 우리는 또한 플래시 / 자바 스크립트 ® 해킹 우리의 설계 목표를 달성하기 위해 노력했습니다. 의미없이 이것은 우리의 웹 디자인에 원하는 글꼴을 얻을 수있는 길을 잘못이지만, 확실히, 그것은 가장 바람직한 방법은 아닙니다. 그리고 년간 웹 디자이너를 통해, 나처럼 완벽하게 자신의 설계를위한 열 가지 정도 글꼴에 의존했습니다.

웹 표준 및 글꼴 형식의 최근 발전은 똑같은 기본 글꼴 이외 typefaces에 HTML 텍스트를 렌더링하는 것이 가능합니다. "@ fontface"CSS의 decleration된다.

@ fontface는 실제 글꼴 파일에 연결하고 웹을 통해 조회할 수있는 솔루션을 provids. @ fontface를 사용하여 설계자는 배경 이미지와 텍스트를 고정하지 않고 글꼴을 사용할 수 있습니다. 구현은 아주 스트레이트 포워드 아래와 같이하지만 모든 좋은 것들이 그것에 CON 부분을 가지고로서, 모든 브라우저는 하나의 "글꼴 유형"을 지원합니다. 당신은 크로스 브라우저 지원을 필요로 사이트에 @를 fontface을 사용하도록 계획하고 계신다면, 다음 같은 다양한 글꼴 유형으로 소스를 제공해야합니다.

1. 트루타입 - 화면에 잘 보이도록 고안된 형식입니다. 특히 윈도우 브라우저 (크롬)를 추천.
2. 오픈 타입 (CFF) -이 형식은 인쇄 작업을 위해 더 낫다 항상 Windows에서 좋아 보이지 않습니다.
3. EOT - 당신이 Internet Explorer를 타겟팅하려는 경우이 형식이 필요합니다. IE는 다른 형식을 사용하지 않습니다. 우리 EOT의 그들은 둘 압축하지 않고 있기 때문에 도메인이 - 제한 "라이트"로 간주됩니다.
4. SVG -이 아이폰을 포함한 일부 브라우저에서 지원하는 XML 형식입니다.
5. WOFF -이 크로스 브라우저, 웹 전용 글꼴 형식 (글꼴 데이터 압축 압축입니다) 경량이며, 트루타입 또는 포스트 스크립트 (CFF)가 약술 중으로 컴파일 할 수 있습니다. 그것은 현재 Firefox 3.6에서 지원됩니다 +.

@ fontface 사용

  @ 글꼴 얼굴 {
 글꼴 - 가족 : "CalligraphyFLFRegular ';
 SRC : URL ( 'CalligraphyFLF.eot');
 SRC : 지역 ( 'CalligraphyFLF'), 지방 ( 'CalligraphyFLF'), URL ( 'CalligraphyFLF.woff'형식 'WOFF'), URL ( 'CalligraphyFLF.ttf'형식 '트루타입'), URL ( 'CalligraphyFLF . SVG # CalligraphyFLF '형식'SVG ');
 }
 @ 글꼴 얼굴 {
   글꼴 - 가족 : "당신의 글꼴";
   SRC : URL ( "글꼴 / font_filename.eot");
   SRC : 로컬 ( "대체 이름"), 지방 ( "Alternatename")
     URL ( "글꼴 / font_filename.woff") 형식 ( "WOFF")
     URL ( "글꼴 / font_filename.otf") 형식 ( "오픈 타입")
     URL ( "글꼴 / # font_filename를 font_filename.svg") 형식 ( "SVG");
   }
 H2 {글꼴 가족 : "당신의 글꼴", 조지아, 리프;} 

당신이 위의 예제에서 볼 수 선택된 글꼴 글꼴을 포함 마찬가지로, 하나는 같은 글꼴에 대한 fonttypes의 집합에 연결해야한다. 그래서 사람들은 "글꼴 키트"으로 참조하십시오.
명시적으로 최종 사용자 사용권 계약 (EULA)에서 거기에 CSS의 @ 글꼴 얼굴 속성과 연결 허용 가능한 글꼴 키트가 있습니다.

유용한 WebFont 자료 :

• @ 글꼴 얼굴 퍼가기 서비스에 사용할 글꼴 의 위키 페이지 http://webfonts.info/wiki/index.php?title=Main_Page
  
• 레이 Larabie . 그는 웹에서 사용하기 위해 자유롭게 사용할 수 흥미로운 트루타입 글꼴 수백 만들었습니다 유명한 폰트 디자이너이다. 그의 서체는 우아한 장식하고, 장난이 심하구나.
• 디터 Steffmann는 또 다른 위대한 글꼴 디자이너입니다. 그는 역시 사용하는 사람이 사용할 수 많은 아름다운 글꼴을 이루었습니다.
• 글꼴 가게 : 웹 사용을 위해 특별히 고안된 글꼴을 제공합니다. 가장 성공적인 FontFont 가정의 30 개 이상은 이제 웹 FontFonts으로 이용이 가능합니다. FontShop는 또한 자세한 WebFont 사용자 가이드가 http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf을
  
• 글꼴 다람쥐가 : 글꼴 다람쥐는 @ 글꼴 얼굴 CSS를 삽입와 함께 사용하도록 제공하는 모든 글꼴을 보여줍니다. 글꼴 다람쥐는 타입의 인상적인 수량을 제공하고 하나를 골라 간단 죽은하게, 그리고 handily '키트'제공 - 원하는 글꼴, 다양한 형태의, 데모 HTML & CSS로 패키지된 매우 전류 @ 글꼴 얼굴 구문을 사용합니다 . 그들은 또한 방법이 제공 자신 @ 글꼴 얼굴 키트를 만드는가 . 사용하려는 글꼴이 (컴퓨터와 함께 오는 사람이 반드시 양호하지 않을 수 있습니다) 적절하게 허가되어 있으면, 발전기가 EOT, SVG, 그리고 안녕을! 생산 WOFF 파일.

포토샵과 일러스트 레이터 같은 도구로 내 제한된 기술 집합으로, 나는 정말로 내가 디자이너 나보다 그 저는 좋은 개발자를 고백하실 수 있습니다. 그러나 코어와 나의 배경 (서버 사이드) 자바 / PHP / 코볼로 개발, 내 UI 개발 기술에 대한 매우 긍정적인 영향되었습니다. 내 디자인을 만드는 동안, 말뜻은, 내가 디자인을 할 예 때마다, 나는 HTML-CSS를하는 동안 디자인 최고의 HTML-CSS로 변환하는 방법을 생각해, 나는 백엔드 기술에 대한 생각을 포기하고 합리적인 확인 HTML은 쉽게 XSL 루프 또는 PHP를 미리보기 등으로 구현할 수있는

년 동안, 나는 아마 donot는 HTML이나 CSS가 무엇인지 단서를 가지고 UI 디자이너에 의해 디자인에 머리를 던져왔다. 요즘 난 그냥 내 목구멍 설계 그의 "코드 불가능"를 shov하려고하는 디자이너가, 그의 디자인 변환될 것인 조금 이해할 거라면, 너무 많이 요구하는 것이라고 생각했습니다 로. 바로 도움이되는 건가?

그럼, 오늘이 게시물을 가로질러 온 ... 웹 디자이너를 누가 코드를 못 ... 감사의 주님! 난 단지 같은 느낌 많은 사람 중 하나입니다 ... 위의 artitle은 약간 긴 숨이 찬입니다 .. 하지만 읽기, 그것의 모든 단어의 가치.

엘리엇 제이 주식 고마워 ... 난 안심 느낌!

여기에서 일부 발췌입니다 Elliots의 기사 .

와, 하루에! 그것은 작은 짹짹로 시작하고 전체 웹 디자인 커뮤니티를 통해 청소 듯 토론으로 끝났다. 그것은 웹 디자이너들이 코드에 수 있어야 여부이라는 주제로 열리는 매우 강한 의견가 나타납니다.
...
우리가이 개입하기 전에,, 제가 신속하게 제가 트위터에 오늘 아침에 말한 일을 정리해보 수 있습니다 :

솔직히, 나는 2010 년 난 아직 자신의 디자인을 코딩 수 없습니다 '웹 디자이너'가로질러 간다 것이 놀랍군요. 변명.

난 내 짹짹에 대해서 좀 더 구체적으로 어야죠. 나는 실제 사이트에 평면 설계를 돌리고 심지어 가장 기본적인 HTML 및 CSS 기술이없는 디자이너에 대해 얘기했다. 아니 의도적으로 코드를 결정할 명, 누가 못해 그. 그리고 또 여기에만 프런트 엔드 코드를 참조하고, 물론 그것 설계자는 또한 놀라운 백엔드 프로그래머가해야한다고 생각하는 웃긴 데요 ...

우리는 코드에 불가능 일러스트 레이터, 300dpi로 보냄 '웹'디자인,, 아니 일관성 / 가용성을 얻을.
~ 에이미 Mahon

왜 이렇게 늦어, 나는 어떻게든 결론을 짓지 야해. 나도 자네 의견은 많은 사람이있을 것이고, 나의 의도는 코드가 없습니다 다른 사람을 불쾌하게하거나 화나게하는 것은 아니지만 내가 말한 것의 일부로 delving 때 항상 나오 포인트 중 일부를 반영되기를 바랍니다 이 토론.

하루의 끝에서, 나는 코드와 사람 수 없어 수있는 동안 잠못하지 않습니다. 난 그냥 순수하게 제가이 과거의 일이라고 생각으로서 프런트 엔드 기술이 부족 많은 디자이너를 찾아 놀랐어요.

내가 쓰기로도 의견을 읽고, 주위 320 코멘트가 있었으며 읽을 가치가 그들입니다.
Elliots 전체 게시물 여기를 읽어 보시기 바랍니다 .. 코딩 수없는 웹 디자이너

라디오 버튼과 텍스트가 인라인 때문에, 그래서 텍스트 라디오 버튼의 하단에 자신을 맞출 것이며, 텍스트는 약간 라디오 버튼 아래로 나타납니다.
당신이 최고가 정렬하고 싶다면, 당신은 divs 또는 지속 기간 (적절)과 같은 별도의 컨테이너로 라디오 및 텍스트를 배치해야 할거야, 그리고 그들이 정렬 돌볼 것입니다. 당신의 디자인 간단한 그것을 허가도 테이블 세포를 사용하기 쉬울 것입니다.

항상 뭘하든 크기의 문제는 없습니다거야 있도록 모든 브라우저가 약간 다르게 라디오를 표시로 이것은 모든 브라우저에서 동일하게 보이는하지 않습니다.