@font-face syntax « Paul Irish Bulletproof Let me introduce you to the best way to do your @font-face definitions: This is the Fontspring @font-face syntax. I’ll circle back to why this is the best possible solution but let’s first review the other techniques’ weaknesses. May 12th, 2010. Okay, let’s see what we got here… Conditional comments (via) Ugh. Double declarations (via) The problem here is that, as Andrea points out, IE will actually download the .otf file. Because after all, IE doesn’t understand the format hint, right? GraublauWeb.otf’)%20format(‘opentype Oops, looks like someone forgot a ? Mo’ Bulletproofer (via) Richard Fink proposed this alternate syntax actually as a response to this post, but I’ve included it back here. The local reference Much more concise and clean. The other benefit.. if it just so happens that a user actually has your custom font installed, this’ll save them the download. Bulletproof @font-face Bulletproof @font-face: Smiley variation The Fontspring @font-face syntax Demo Additional notes and gotchas:
Lien utiles pour les graphistes Liens utiles et astuces pour débutants Si vous venez de créer un blog et que vous n’avez aucunes notions en graphisme, vous vous êtes peut-être retrouvé(e) dans la même situation que moi lorsque vous avez voulu concevoir une bannière, un habillage ou tout simplement une petite image pour égayer vos articles. A savoir : être complètement dans le brouillard ! Et puis, à force de demander des astuces à des geeks, des graphistes et d’autres blogueurs, j’ai récolté un bon nombre de liens dans mes favoris et quelques notions en Photoshop & Co. Voici quelques-uns que je voudrais partager avec vous, graphistes et/ou bloggeurs amateurs. Ceci dit, dites-vous bien que la liste ci-dessous est une liste non exhaustive. Les banques d’images Il existe des sites payants avec inscription obligatoire afin d’en télécharger le contenu, les deux plus connues étant Fotolia, Shutterstock et Istockphoto. Les polices et les fonts Vous cherchez quelque chose de punchy, gothique, calligraphié ? Les textures
How to Add Cufon to your Web Pages | Fearless Flyer Web Design I’m a big fan of Woothemes. It seems that each time they come out with a theme – they push the boundaries of web design. Take a look at their latest creation: Therapy – I can’t help but fall in love with the fine background gradients, smooth and seamless transparencies and nice rounded edges. But what I really like about Therapy is it’s amazing typography. I said to myself: “that’s excellent utilization of sIFR”. I inspect element in Firebug – then I see span class “cufon” everywhere. So What in the world is Cufon? Cufon is defined as “fast text replacement with canvas and VML”. So I went ahead and tried Cufon. Step 1: Get Cufon The first thing you need is to download the core javascript file which is responsible for the rendering of your custom font inside your HTML. Step 2: Generate your Font On the same page at – click on the “Regular typeface” field – and browse to your desired font in your local machine. The rest of the upload fields are optional.
Comprendre le modèle M-V-C CakePHP suit le motif de conception logicielle MVC. Programmer en utilisant MVC sépare votre application en 3 parties principales : Le Modèle représente les données de l’application La Vue affiche une présentation des données du modèle Le Contrôleur intercepte et route les requêtes faites par le client Figure 1 La figure 1 montre un exemple de requête MVC sommaire avec CakePHP. Ricardo clique le lien qui pointe vers et son navigateur envoie une requête à votre serveur web.Le répartiteur (dispatcher) analyse l’URL (/cakes/acheter) et transmet la requête au contrôleur concernéLe contrôleur exécute la logique spécifique de l’application. Presque chaque requête à votre application suivra ce schéma de base. Bonnes pratiques pour les déclarations @font-face Petit rappel historique À l’origine, les déclarations CSS @font-face faisaient partie de la norme CSS 2.0 et étaient supportées aussi bien par Internet Explorer 6 que par Netscape 4. Nous étions alors à la fin des années 90 et la guerre entre ces deux navigateurs faisait rage. Avec CSS 3, c’est le grand retour en force des fontes web à travers le module CSS Fonts qui redéfinit la méthode d’insertion des fontes personnalisées dans les navigateurs. Déclaration simplifiée Une déclaration simple ressemble à ça : La propriété font-family permet de définir le nom de la fonte tel qu’il sera utilisé par la suite dans les déclarations de style. Gestion des formats de fonte Le problème de l’exemple précédent, c’est qu’il ne fonctionnera qu’avec les navigateurs qui supportent les polices au format TrueType. Il n’y a qu’une seule façon de déclarer plusieurs fichiers alternatifs pour une même fonte, c’est en séparant les déclarations d’url par une virgule (pratique assez courante avec CSS3). Conclusion
W3C - CSS Fonts Module L3 Abstract This CSS3 module describes how font properties are specified and how font resources are loaded dynamically. The contents of this specification are a consolidation of content previously divided into CSS3 Fonts and CSS3 Web Fonts modules. The description of font load events was moved into the CSS3 Font Load Events module. Status of this document This section describes the status of this document at the time of its publication. This document was produced by the CSS Working Group as a Candidate Recommendation. A Candidate Recommendation is a document that has been widely reviewed and is ready for implementation. Publication as a Candidate Recommendation does not imply endorsement by the W3C Membership. This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. See the section CR Exit Criteria for details on advancing this specification to W3C Recommendation. Features at risk Table of Contents 1 Introduction 2 Typography Background Ligature example weight
Glossaire français-anglais de l'édition - Asfored Glossaire bilingue Le présent glossaire a pour objectif de faciliter la communication entre professionnels du livre. Il fixe la terminologie technique qui peut être utilisée dans les différents échanges. Les concepts et les pratiques pouvant varier selon les zones linguistiques. Le principe retenu a été de donner, quand ils existent dans chacune de ces langues, les mots anglais et français. Le tiret indique que nous n’avons pas trouvé de terme équivalent dans la langue concernée. Bi-lingual Lexicon The aim of this lexicon is to facilitate communication between professionals of the publishing industry. Some concepts (and practices) may vary from one area to another.
22 Completely Free Fonts for @Font-Face Embedding Are you getting bored of using the same old fonts in your websites? If yes, then @font-face is the device that you are looking for. It allows you to embed any font according to your wish into the websites. This device is helpful to abolish the monotonous use of same fonts each time you create a website. Web designing is a creative job and like any other creative job it asks for variations. @Font-Face embedding is the latest in the string of efforts. The most important part of this is that these fonts can be availed for free from the internet. Colaborate Greyscale Basic Quicksand Open Sans Condensed News Cycle Latin Modern Sans Existence Light Lacuna Regular Josefin Sans Std CuprumFFU Droid Sans CartoGothic Std Bebas Metrophobic Enigmatic Asap Cicle Prociono Raleway Jura Hattori Hanzo League Gothic
Conseils pour une bon titre d'article sur le Web Étiquettes : lisibilité, principes formels, principes rédactionnels C’est quoi un titre d’article qui marche? On vous propose un inventaire des différents genres de titres qui marchent pour vos contenus Web. Pour trouver un bon titre d’article, il faut savoir ce que vous cherchez. Il existe deux grandes catégories de titres : Les titres directsLes titres indirects Les titres directs Ex. : Tout savoir sur l’écriture pour le Web Leur sens est littéral. Les titres indirects Ex. : En mal d’appât ? Ils exploitent une voie « oblique ». Dans ces deux catégories, on distingue des sous-catégories, telles que: Les titres impératifsLes titres « à la une »Les titres sous forme de questionLes titres « Comment… »Les titres « X bonnes raisons de »Les titres « témoignage » Les titres impératifs Ex. : Mettez de l’ordre dans vos titres ! On se souvient des pub Vittel « Buvez, éliminez » … Dans vos titres impératifs, le premier mot sera généralement un verbe qui encourage l’utilisateur à agir… Alors, convaincus ?
Web fonts with @font-face Home / CSS3 Previews / Web fonts with @font-face Not exactly a feature which is new to CSS3, @font-face was first proposed for CSS2 and has been implemented in Internet Explorer since version 5! However, their implementation relied on the proprietary Embedded Open Type (.eot) format, and no other browsers decided to use this format. With the release of Safari 3.1, however, website makers can use any licensed TrueType (.ttf) or OpenType (.otf) font in their pages. To use web fonts, each form of the font family must be declared using the @font-face rule; for example, to use both regular and italic forms of Jos Buivenga’s Delicious font, you would put the following in your stylesheet: Then call it using font-family: Users of Safari 3.1 will see this text rendered with the Delicious font, with this part in Delicious Bold. For anyone not viewing in Safari 3.1 – or who doesn’t already have the font installed – here’s a reference image:
Sitedrop. Des portfolios collaboratifs avec Dropbox Sitedrop est un service en ligne qui permet de créer très facilement des portfolios à partir de vos fichiers présents sur Dropbox. Sitedrop a la particularité de faciliter le travail collaboratif pour tous les métiers du visuel. Graphistes, designers, photographes y trouveront un outil simple pour partager leurs créations avec leurs clients. Sitedrop vient enrichir les fonctions de base du système de sauvegarde Dropbox. Il permet de créer des sitedrops à partir d’un dossier crée sur Dropbox. Plus intéressant, Sitedrop facilite le travail collaboratif. Les portfolios générés par Sitedrop peuvent être publics ou protégés par un mot de passe. Sitedrop offre la possibilité d’organiser ses contenus graphiques sous la forme de magnifiques portfolios tout en permettant le travail collaboratif en autorisant d’autres personnes à interagir avec votre contenu. Le meilleur pour la fin, Sitedrop est gratuit. Lien: Sitedrop