Dynamic Font Replacement

1,604 views

Published on

basic overview of font replacement plugins. With detailed overview of sifr and cufon.

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,604
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Files nodig:Sifr.jsSifr.css
  • Files nodig:Sifr.jsSifr.css
  • Files nodig:Cufon.jsFont.js
  • Files nodig:Cufon.jsFont.js
  • Option Description Possible values Default value autoDetect If true, font-family is read from CSS instead of the fontFamily option. Does not work in Opera, which is why the option is disabled by default. (since: 1.04) true, false false color The color of the text. Defined in CSS, unless you’re using gradients (see Styling for more information). ‘red’, ‘#f62315’, .. Defined in CSSfontFamily The name of the font you’d like to use. Defaults to the name of the font that was loaded last (i.e. last <script>). Name of any loaded fontThe name of the last fontfontSize The size of the font. Defined in CSS, you should not touch this value. Only use pixel values if you do. ‘14px’, ‘24px’, ‘72px’, .. Defined in CSSfontStretch CSS3, cannot be defined in CSS. Goes against the specs by stretching the original font instead of choosing a suitable stretched variant. See all possible values and what they map to. ‘160%’, ‘condensed’, ‘semi-expanded’, .. ‘normal’fontStyle The style of the font. Defined in CSS, the best match is chosen by default. ‘normal’, ‘italic’, ‘oblique’ Defined in CSSfontWeight The weight of the font. Defined in CSS. The best match is chosen by default. You might have to adjust this value for rarer weights if you’re using multiple variants of a font. 100-900, ‘normal’, ‘bold’ Defined in CSSforceHitArea Fixes hit area for mouse events in Internet Explorer. Enabling hover also enabled this option. true, false false hover Whether or not :hover is enabled. For performance reasons this option disabled by default. true, false falsehoverables Defines which elements :hover is used with. Defaults to links only as IE6 can’t handle anything else. { tag: true, .. } { a: true }letterSpacing The space between letters, in addition to kerning (if enabled). Defined in CSS. ‘-1px’, .. Defined in CSS selector The selector engine to use. Defaults to the selector engine of whatever framework you’re using, or document.getElementsByTagName otherwise. JavaScript functionProvided by the JS framework separate How to separate pieces of text. By default each word is considered a unit of its own, which works well with multi-line text. ‘none’ is only suitable for single lines of text. ‘words’, ‘none’ or ‘characters’ ‘words’textShadow Renders text shadows. See Styling for examples. Can be defined in CSS but many browsers do not support it. ‘1px 1px #000’, .. ‘none’textTransform How to transform the text. Defined in CSS. ‘uppercase’, ‘lowercase’, ‘capitalize’, ‘none’ Defined in CSS
  • Every major browser is about to support the ability to link to a font. This is a massive upgrade for the web. But there’s a problem. While it’s technically quite easy to link to fonts, it’s legally more nuanced. Almost all fonts are protected by copyright — even those available for free — and very few of them allow for linking via CSS or redistribution on the web.That’s where Typekit comes in. We’ve been working with foundries to develop a consistent web-only font linking license. We’ve built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.
  • Dynamic Font Replacement

    1. 1. Dynamic Text Replacement?<br />Is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems.<br />Dynamic Text replacement<br />
    2. 2. Dynamic Text Replacement?<br />Is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems.<br />Dynamic Text replacement<br />
    3. 3. Overzicht<br />sIFR 2.0<br />Cufón<br />P+C DTR (php)<br />FLIR(php)<br />SIIR(php)<br />DTR(php)<br />Typeface.js (beperkter dan cufón)<br />Swifr <br />Dynamic Text replacement<br />
    4. 4. sIFR<br />Voordelen:<br />Alle mogelijke fonts<br />Flash filters<br />Text selecteerbaar <br />Line height<br />Browser coverage<br />Nadelen:<br />Flash player + javascript<br />Werkt alleen op een webserver<br />http://www.mikeindustries.com/blog/sifr/<br />http://wiki.novemberborn.net/sifr3/<br />http://www.tecnorama.org/document.php?id_doc=70 (dreamweaver plugin)<br />Dynamic Text replacement<br />
    5. 5. sIFR – how to start<br />Get sIFR<br />Create the flash<br />Replace text<br />Dynamic Text replacement<br />
    6. 6. sIFR - basic<br />&lt;link rel=&quot;stylesheet&quot; href=&quot;sifr.css&quot; type=&quot;text/css&quot;&gt; <br />&lt;script src=&quot;sifr.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; <br />&lt;script type=&quot;text/javascript&quot;&gt; <br />var cochin = { src: &apos;cochin.swf&apos; }; <br />sIFR.activate(cochin); <br />sIFR.replace(cochin, { selector: &apos;h1&apos; }); <br />&lt;/script&gt;<br />Dynamic Text replacement<br />
    7. 7. sIFR<br />&lt;link rel=&quot;stylesheet&quot; href=&quot;sifr.css&quot; type=&quot;text/css&quot;&gt; <br />&lt;script src=&quot;sifr.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; <br />&lt;script type=&quot;text/javascript&quot;&gt; <br />varcochin = { src: &apos;cochin.swf&apos; }; <br />sIFR.activate(cochin); <br />sIFR.replace(cochin, { selector: &apos;h1&apos;, forceSingleLine: false, selectable: false, wmode: &apos;transparent&apos;, css: { &apos;.sIFR-root&apos;: { &apos;color&apos;: ‘#FF0000’, &apos;font-size&apos;: &apos;30px&apos; }}});<br />&lt;/script&gt;<br />Dynamic Text replacement<br />
    8. 8. Cufón<br />Voordelen:<br />handige generator<br />easy to implement<br />hover effects mogelijk<br />line height<br />duidelijke documentatie<br />Nadelen:<br />geen flash filters<br />Font file kan &gt;1MB worden<br />http://wiki.github.com/sorccu/cufon/usage<br />http://cufon.shoqolate.com/generate/<br />http://wiki.github.com/sorccu/cufon/api<br />Dynamic Text replacement<br />
    9. 9. Cufón – how to start<br />Get cufón! <br />Generate a font<br />Replace text<br />Making Internet Explorer behave <br />&lt;script type=&quot;text/javascript&quot;&gt; Cufon.now(); &lt;/script&gt;<br />Dynamic Text replacement<br />
    10. 10. Cufón - basic<br /> &lt;script src=&quot;cufon-yui.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br /> &lt;script src=&quot;Fortuna_Dot_400.font.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br /> &lt;script type=&quot;text/javascript&quot;&gt;<br />Cufon.replace(&apos;h1&apos;);<br />&lt;/script&gt;<br />//onderaan de pagina – om flikkering te voorkomen in ie.<br />&lt;script type=&quot;text/javascript&quot;&gt; Cufon.now(); &lt;/script&gt;<br />Dynamic Text replacement<br />
    11. 11. Cufón – multiple fonts<br /> &lt;script src=&quot;cufon-yui.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br /> &lt;script src=&quot;Fortuna_Dot_400.font.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />&lt;script src=&quot;Paralucent-Light_300.font.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br /> &lt;script type=&quot;text/javascript&quot;&gt;<br />Cufon.replace(&apos;h1&apos;, { fontFamily: &apos;Fortuna Dot&apos; });<br />Cufon.replace(&apos;h2&apos;, { fontFamily: &apos;Paralucent- Light&apos;});<br />&lt;/script&gt;<br />Dynamic Text replacement<br />
    12. 12. Cufón – effects<br /> &lt;script src=&quot;cufon-yui.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br /> &lt;script src=&quot;Fortuna_Dot_400.font.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br /> &lt;script type=&quot;text/javascript&quot;&gt;<br /> Cufon.replace(&apos;h1&apos;, {fontFamily: &apos;Fortuna Dot&apos;, color: &apos;-linear-gradient(red, #C00, #23d559, rgb(0, 0, 0))&apos;});<br />&lt;/script&gt;<br />Dynamic Text replacement<br />
    13. 13. Demo<br />Dynamic Text replacement<br />
    14. 14. De Toekomst<br />http://blog.typekit.com/<br />http://typekit.com/<br />http://twitter.com/TypeKit<br />http://forabeautifulweb.com/blog/about/why_typekit_will_change_everything/<br />Dynamic Text replacement<br />

    ×