Becoming a Font Embedding Master
I've spent a couple days worth now trying to figure out the best and most complete approach to font embedding using @font-face. It really is a dark art that must be mastered. It is by no means a straightforward process. Font Formats Generally speaking, these days, a font on our system is going to be one of two formats: TrueType (with a .ttf file extension) or OpenType (with a .otf file extension). Licensing, and Browser Support Licensing Licensing is one of the biggest hurdles. Even many free fonts have limitations on how they can be used, often times requiring specific directions on linking back to the original source or only using them in non-commercial sites. These days, a number of resources are popping up—especially those dedicated to font embedding. Browser Support Which leads me into the other major issue, browser support. Okay, that's decent already but we can do better. If you have an OTF file, you'll need to convert it into a TTF file before you can convert it into an EOT.
ttf2eot
The Essential Guide to @font-face
Fonts on the Web The days of being limited to a handful of fonts on the web are very close to being a thing of the past. The problem is no longer a lack of viable solutions, but rather, an abundance of them. Technologies like Cufon, sIFR, FLIR and @font-face all represent different groups of developers placing bets on what they believe to be the future of web typography. There is, as of yet, no consensus in this ever-evolving game. Further, even the most popular browsers support each of these technologies in widely varying degrees. However, the @font-face CSS method is among the strongest, simplest and most flexible competitors in this game. This guide will teach you how to implement @font-face with cross-browser compatibility and will also look at a number of the supporting services that have arisen, making it even easier to use custom fonts in your web designs. Licensing and Free Fonts Font licensing presents one of the largest headaches and stumbling blocks to great typography on the web.
한국워드프레스사용자모임 | 워드프레스를 사용하는 사람들의 커뮤니티 한국워드프레스사용자모임 | 워드프레스를 사용하는 사람들의 커뮤니티
iWeb Widgets, Tutorials, Tips, and Tricks | Beyond iWeb
» CSS Trick: Turning a background image into a clickable link
One of the things I most often get asked by people trying to master HTML and CSS is “How do I make a background image clickable?” It’s easy to wrap a regular image tag in a link, but what if your design or situation required that you use a background image? It’s actually quite simple. Just follow these steps and I’ll show you how to make a clickable background image like this: Range Web Development Start with just a link exactly as you would make it for any other purpose, and make sure to give the link an id so that we can use that to apply our styles: That’s all the (X)HTML you’ll need to make your background image clickable. So, how can we make a background image a clickable link? At this point it should look something like this: Range Web Development Now all we need to do is hide the text. And the finished product looks like this: Range Web Development And there you have it – a quick CSS trick with clean markup that turns your background images into clickable links.
유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드
<hx>...</hx> 제목 요소는 '섹션, 블럭' 콘텐츠에 대한 제목을 마크업 하는 요소로써 문서의 계층 구조를 여섯 단계로 표현 합니다. 작은 숫자일수록 큰 제목으로써 웹 브라우저들은 흔히 좀 더 크고 굵은 글꼴로 표시하시만 CSS를 이용해서 초기화 하거나 원하는 스타일로 변경할 수 있습니다. <h1>... <title>사람에 관한 연구</title> <h1>인체의 신비</h1> _<h2>뇌의 구조</h2> __<h3>전두엽의 주요 기능</h3> ___<h4>타인의 아픔에 공감하는 기능</h4> _<h2>눈의 구조</h2> __<h3>망막의 역할</h3> 웹 사이트의 로고(조직의 이름, 브랜드 이름)를 <h1>...
UX Designer란? - ILUVUXDESIGN(동영상)
UX Designer는 무엇을 하는 사람인가? 주변 친구들이나 가족들이 저의 직업을 물을 때 한 번에 명쾌하게 대답하지 못 해 늘 힘들어하고 있습니다. 저 자신도 UX Designer가 무얼하는 사람인지 정확히 잘 모르겠고, 그래서 제가 UX Designer인지도 솔직히 말하면 잘 모르겠습니다. 하여간 UX Designer를 재미있게 설명한 동영상이 있어서 소개합니다. 2011년 2월 25일에 davideandriolo 란 아이디로 유투브에 올린 동영상입니다. (0분38초 부근에, 영국 억양인 듯한 나래이터가 '퍼소나스'라고 발음하는 것이 또렷히 들리네요) 영어 공부도 할 겸, 스크립트를 올려봅니다. 영어 원문: What designer has the most elaborate, the most complex, the most beautiful job in the world? 한국어 번역(명지은 번역,이재용 교정): 세상에서 가장 정교하고, 가장 복합적이며, 가장 아름다운 직업이 무엇일까? Design, devign, Persona, prototype, task, User Experience, UX designer, UX 디자이너, ux란, UX리서치 이 재용이 재용은 타고난 인간에 대한 무관심을 노력으로 극복하여 '따뜻한 사람'으로 위장하고 사는 법을 터득했습니다. 블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.
