Nice Web Type – How to use CSS @font-face. Code up top for quick reference, details down below—we’ll prepare typefaces for use on the web, go through @font-face CSS line-by-line, and get the experts’ take on browser support. Updated May 2010 with new syntax from Paul Irish. The CSS: The HTML: <h2>This headline is typeset in <em>your typeface</em>. </h2> Before we get started If you want to brush up history and basics, Håkon Wium Lie has a great introduction to the CSS @font-face property in his A List Apart article, CSS @ Ten: The Next Big Thing. Acquire a typeface You may have a typeface in mind, or you may have no idea where to begin. I have also experimented with several properly-licensed typefaces in a series I call Nice Web Type Likes, providing bits of advice with each example and explaining what I feel are each typeface’s merits.
For this demonstration I’ll use Fontin Sans from Exljbris. /* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */ Go grab a properly licensed typeface, then continue reading here. Tools vs. <! Helps Make the Internet - Making @font-face work on Tumblr | Justin Dickinson. The other day I was messing around with the theme for A Variety of Things* and wanted to use a custom font. I headed to Font Squirrel** and downloaded myself a @font-face kit. For ease of use I decided to host an external CSS file on my server and just point to it in the theme. Chrome worked fine, then I tested Firefox: no go. A little Googling pointed out why: Firefox doesn’t allow references to fonts hosted on another domain. Makes sense, from a security standpoint but makes my life harder right now.
Even a Tumblr on a custom domain (like this one) would have problems since you couldn’t host the files on the exact subdomain (my static files for this blog are hosted off of uploads.justindickinson.com, that didn’t work). I wasn’t ready to give up. Instead, I opted to go the route of Base64 encoding. I used the encoder here and used the following format that I found here. This worked like a charm. Create Your Own @font-face Kits. Typography Effects with CSS3 and jQuery. Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we'll explore some of the possibilites.
View demo Download source Today we will create a set of nice typography effects for big headlines using CSS3 and jQuery. There are many things we can do with CSS3 animations and transitions and we’ll explore some of the possibilites. We’ll be using Lettering.js in order to style single letters of the words we’ll be having in our big headlines. The image used in the demo is by Andrey & Lili. The HTML The structure will simply be an h2 element with an anchor inside.
Then we’ll call the Lettering.js plugin, so that every letter gets wrapped in a span. Now, let’s take a look at each example. In order not to bloat the tutorial, I will not be showing any CSS vendor prefixes. Example 1 In the first example we want to skew the letters in order to create bit of perspective. Example 2 Example 3. Les ligatures dans les navigateurs. C’est quoi une ligature ? Avant de rentrer dans le vif du sujet, rappelons brièvement ce que sont les ligatures typographiques. Pour faire simple, une ligature typographique consiste à lier [1] deux glyphes pour en former un nouveau. Les ligatures ont évolué au cours de l’histoire de l’écriture puis de la typographie et toutes les langues ne sont pas égales face à cette notion. Par exemple, l’alphabet arabe ou certains alphabets asiatiques en font un usage très important. Les ligatures des langues en alphabet latin sont, grosso modo, de 4 ordres [2] : les ligatures obligatoires, Les ligatures ordinaires, les ligatures esthétiques et les ligatures spécifiques.
Ligatures obligatoires Il s’agit de ligatures locales, liées à une langue précise et qui, si elles ne sont pas faites, consistent le plus souvent en une faute d’orthographe. Ligatures ordinaires Elles sont des ligatures optionnelles (mais vivement recommandées) qui correspondent à des pratiques issues de la typographie au plomb. Les pieds (de page) dans le plat. Par Bobby van der Sluis Un des atouts de la méthode traditionnelle de mise en page par tableaux est qu'elle vous permet de créer très facilement des designs fluides. Si vous souhaitez centrer verticalement du contenu, ou fixer un pied de page en bas de la fenêtre du navigateur, il vous suffit d'inclure un tableau principal doté d'une largeur de 100% et d'y positionner vos éléments.
Avec les standards du web, ce n'est plus possible. La propriété height des tableaux est déclassée en XHTML, et les normes actuelles recommandent d'éviter l'utilisation de tableaux pour la mise en page. Pour séparer structure et présentation, CSS est tout indiqué - mais si vous voulez utiliser CSS pour le positionnement vertical, vous allez vous heurter à des défaillances chez certains des navigateurs principaux.
Positionnement absolu dans un bloc relatif Imaginez un conteneur de largeur fixe. <div id="container"><div id="content">... Et votre feuille de style à ceci : Associer le contenu à la fenêtre du navigateur. Css, float et IE | CommentCaMarche. A List Apart.