6 ms·

Web fonts and CSS features - a simple demonstration

22 points by andreyf 17y ago

chaosmachine 17y ago
This is how simple it should have been from the beginning.
- TweedHeads 17y ago
  Lets all thank M$ for holding the web in darkness for a decade. Lets all thank Mozilla for giving the web back to the users. Lets all thank safari, opera and chrome for their support. (Special thanks to opera for always being a step forward) Now, lets all keep working on improving the web more, we already lost a decade and we can not spend another one mourning the time lost. Lets get rid of css -moz and -webkit hacks already. Lets move SVG forward, canvas is already here. And bring WebSockets to live, there is a whole new world awaiting...
  - snorkel 17y ago
    M$ deserves some credit for supporting CSS long before other browsers did, as well as AJAX. But launching IE8 without canvas, border-radius, and web fonts is pretty sad.
  - GHFigs 17y ago
    Lets get rid of css -moz and -webkit hacks already. They aren't hacks. They are the official way of providing extentions whose behavior is not yet part of a finalized standard.
  - steveklabnik 17y ago
    It is my understanding (which may be incorrect) that -moz and -webkit is the way that it's supposed to be done, in compliance with standards. See vendor specific keywords here: http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords The idea is that by identifying them with a specific browser, new features can be tested by vendors first before moving into the main standard. This is much, much better than some sort of 'silent extension' where one browser treats some type of tag as different without being explicit about it being for one particular browser.
jballanc 17y ago
Is it just me, or does the second font there give an optical illusion that it's moving?
blhack 17y ago
<blink>Aren't browser-specific features one of the things that mozilla was supposed to cure?</blink>
- johndagostino 17y ago
  this is in the css3 spec and is already implemented by ie and webkit. http://webkit.org/blog/124/downloadable-fonts/ http://webkit.org/blog/124/downloadable-fonts/ http://www.css3.info/preview/web-fonts-with-font-face/ http://www.css3.info/preview/web-fonts-with-font-face/
  - davidblair 17y ago
    I think blhack is referring to the -moz-border-radius selector that only works in Firefox. One could use the CSS3 selector, border-radius, but that is not in the article.
hrabago 17y ago
The demo also works in Safari 4 on a Mac.
- jeroen 17y ago
  and on Windows.
kamidev 17y ago
Yes, the demo works in Safari 4 too. Opera 10 on a Mac only changes the third font from the left, though. Wonder why?

22 points by andreyf 17y ago

chaosmachine 17y ago

This is how simple it should have been from the beginning.

TweedHeads 17y ago
Lets all thank M$ for holding the web in darkness for a decade. Lets all thank Mozilla for giving the web back to the users. Lets all thank safari, opera and chrome for their support. (Special thanks to opera for always being a step forward) Now, lets all keep working on improving the web more, we already lost a decade and we can not spend another one mourning the time lost. Lets get rid of css -moz and -webkit hacks already. Lets move SVG forward, canvas is already here. And bring WebSockets to live, there is a whole new world awaiting...
- snorkel 17y ago
  M$ deserves some credit for supporting CSS long before other browsers did, as well as AJAX. But launching IE8 without canvas, border-radius, and web fonts is pretty sad.
- GHFigs 17y ago
  Lets get rid of css -moz and -webkit hacks already. They aren't hacks. They are the official way of providing extentions whose behavior is not yet part of a finalized standard.
- steveklabnik 17y ago
  It is my understanding (which may be incorrect) that -moz and -webkit is the way that it's supposed to be done, in compliance with standards. See vendor specific keywords here: http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords The idea is that by identifying them with a specific browser, new features can be tested by vendors first before moving into the main standard. This is much, much better than some sort of 'silent extension' where one browser treats some type of tag as different without being explicit about it being for one particular browser.

jballanc 17y ago

Is it just me, or does the second font there give an optical illusion that it's moving?

blhack 17y ago

<blink>Aren't browser-specific features one of the things that mozilla was supposed to cure?</blink>

johndagostino 17y ago
this is in the css3 spec and is already implemented by ie and webkit. http://webkit.org/blog/124/downloadable-fonts/ http://webkit.org/blog/124/downloadable-fonts/ http://www.css3.info/preview/web-fonts-with-font-face/ http://www.css3.info/preview/web-fonts-with-font-face/
- davidblair 17y ago
  I think blhack is referring to the -moz-border-radius selector that only works in Firefox. One could use the CSS3 selector, border-radius, but that is not in the article.

hrabago 17y ago

The demo also works in Safari 4 on a Mac.

jeroen 17y ago
and on Windows.

kamidev 17y ago

Yes, the demo works in Safari 4 too. Opera 10 on a Mac only changes the third font from the left, though. Wonder why?