디자이너의 다섯가지 덕목 – Channy’s Blog

Written on 2010.10.13, 4:44 pm by jay / Comments are off

디자이너의 다섯가지 덕목 – Channy’s Blog.

원문: So You Want to be a Designer: Top 5 List by Aza Raskin

@font-face에 나눔고딕을 써보자-updated

Written on 2010.06.16, 5:22 pm by jay / 4 Comments

오늘 나눔글꼴이 OFL(Open Font License)로 라이선스로 변경되었다는 글을 보고 웹폰트로 적용하는 법과 변환폰트를 올려본다을 설명드립니다.

브라우저 호환성과 폰트변환 오류때문에 수정된 글입니다.

아래소스는 웹폰트변경툴인 @font-face Generator로 만들어진 소스기준으로 설명드립니다.

일단 웹폰트는 css에 다음과 같이 지정해준다.

@font-face {
	font-family: 'NanumGothicRegular';
	src: url('nanumgothic.eot');
	src: local("☺"),
		url('nanumgothic.woff') format('woff'),
		url('nanumgothic.ttf') format('truetype'),
		url('nanumgothic.svg#webfonturzspG4F') format('svg');
}

@font-face {
	font-family: 'NanumGothicBold';
	src: url('nanumgothicbold.eot');
	src: local("☺"),
		url('nanumgothicbold.woff') format('woff'),
		url('nanumgothicbold.ttf') format('truetype'),
		url('nanumgothicbold.svg#webfontqaHEB3q2') format('svg');
}

이제 이 폰트를 사용하고 싶은 부분에 font-family를 지정해준다

body {
	font-family: "NanumGothicRegular", 대체폰트, sans-serif;
}
strong {
	font-family: "NanumGothicBold", 대체폰트, sans-serif;
}

위와 같이 하면 본문은 나눔고딕으로, strong태그는 나눔고딕 Bold로 나오게된다.

유의할점

  • Bold체를 위해서 font-family에 NanumGothic Bold를 따로 선언하지않고 같은이름에 font-weight로만 지정해준다 font-weight나 font-style로 표현할 경우 ie와의 호환성 문제가 생긴다고 합니다.
  • 로컬폰트를 사용할 수 있게 src: local('폰트이름'), local('postscript이름')에 맞춰 지정하게 되어있지만 맥에서 한글같은 2바이트 폰트이름의 문제때문에 ☺같은 특수문자로 대체합니다.
  • svg폰트의 #xxx부분은 svg폰트로 변환시에 지정되는 id입니다.

css와 font 다운로드 (용량문제와 재변환시간문제로 삭제합니다.)

@font-face Generator에서 폰트업로드후 expert옵션의 subsetting에서 어떤 캐릭터셋인지, 어떤 캐릭터를 포함할건지를 선택후 변환하시면 됩니다.

자신의 서버가 폰트파일을 허용하지 않을때에는 css option에서 base64인코딩을 선택하시면 됩니다.

style linking을 체크하시면 유의사항1에서 말씀드린 문제를 겪게 됩니다.

  • Tagged with :

마음에 드는 일본어 폰트

Written on 2010.05.12, 2:45 am by jay / Comments are off

unknown japanese font

서핑하다 발견한 마음에 드는 일본어 폰트. – 그림의 내용에 신경쓰진 말자;
타이포그래피 자체는 산만해서 맘에 들지 않지만 폰트만은 너무 마음에 든다.

url cursor 정리

Written on 2009.11.13, 2:27 am by jay / Comments are off

프로젝트에 적용하기위해 url cursor를 사용하는법을 찾아보았다.
의외로 상당한 크로스브라우징을 지원 :) 

#cursorTest {
   cursor: url(example.png), url(example.cur), pointer;
}
  • 첫번째 값을 인식하지 못하면 다음값을 적용하는 방식이다.
  • 브라우저 호환성을 위해 마지막은 url이 아닌 cursor를 지정해줘야 한다.
  • IE는 .cur파일을 사용해야한다.
  • IE는 상대경로로 할때 css기준이 아닌 도큐먼트 기준으로 정해줘야한다.
  • Windows의 브라우저는 32×32이하의 사이즈를 사용해야한다.
  • opera(현재10기준)는 지원하지 않는다 :(

참고 URL

가변폭 레이아웃에서 float clear시키기

Written on 2009.08.10, 11:40 pm by jay / Comments are off

높이가 다른 float된 엘리먼트만으로 이루어진 가변폭 레이아웃에서 윈도우 사이즈에 따라 다이나믹하게 이를 clear시켜주는 방법.

Variable height liquid float galleries with JQuery and Prototype

구글 이미지검색결과의 경우도 이와 비슷한 효과이긴 한데 테이블로 되어있어서 윈도우 사이즈가 변하면 서로 다른 tr로 td가 이동하게 되어있다.

Archives... Older Posts