http://rocodev.com
○○○○○    http://rocodev.com
http://rocodev.com
http://rocodev.com
○    http://rocodev.com
○    ○        http://rocodev.com
○    ○    ○        http://rocodev.com
○    ○    ○○        http://rocodev.com
○    ○    ○○    ○        http://rocodev.com
○    ○    ○○    ○    ○        http://rocodev.com
http://rocodev.com
http://rocodev.com
○    http://rocodev.com
○○    http://rocodev.com
○○○    http://rocodev.com
○○○○    http://rocodev.com
http://rocodev.com
http://rocodev.com
○    http://rocodev.com
○    ○        http://rocodev.com
○    ○    ○        http://rocodev.com
○    ○    ○    ○        http://rocodev.com
○    ○    ○    ○○        http://rocodev.com
○    ○    ○    ○○    ○        http://rocodev.com
○    ○    ○    ○○    ○    ○        http://rocodev.com
○    ○    ○    ○○    ○    ○    ○        http://rocodev.com
http://rocodev.com
http://rocodev.com
http://rocodev.com
○    http://rocodev.com
○○    http://rocodev.com
○○○    http://rocodev.com
○○○○    http://rocodev.com
○○○○○    http://rocodev.com
○○○○○○    http://rocodev.com
http://rocodev.com
http://rocodev.com
http://rocodev.com
○○○○○    http://rocodev.com
○○○○○    http://rocodev.com
@font-face {    font-family: web-font;    src: url(web-font.eot?) format(eot),   IE    url(web-font.woff) format(woff),   ...
http://rocodev.com
http://rocodev.com
救世主http://rocodev.com
data
http://rocodev.com
http://rocodev.com
http://rocodev.com
demo 1         http://rocodev.com
demo 2         http://rocodev.com
demo 3         http://rocodev.com
demo 4         http://rocodev.com
demo 5         http://rocodev.com
demo 6         http://rocodev.com
http://rocodev.com
// html<h1 class="type1">  <span class="char1">黑</span>  <span class="char2">與</span>  <span class="char3">白</span>  <span...
demo 7         http://rocodev.com
http://rocodev.com
final demo 8               http://rocodev.com
http://rocodev.com
WebFont & CSS3 交響曲
WebFont & CSS3 交響曲
WebFont & CSS3 交響曲
WebFont & CSS3 交響曲
Upcoming SlideShare
Loading in...5
×

WebFont & CSS3 交響曲

5,003

Published on

「黑與白的饗宴 — 談現代字體應用與設計」伯朗咖啡南京一店的演講

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

No Downloads
Views
Total Views
5,003
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
58
Comments
0
Likes
19
Embeds 0
No embeds

No notes for slide

WebFont & CSS3 交響曲

  1. 1. http://rocodev.com
  2. 2. ○○○○○ http://rocodev.com
  3. 3. http://rocodev.com
  4. 4. http://rocodev.com
  5. 5. ○ http://rocodev.com
  6. 6. ○ ○ http://rocodev.com
  7. 7. ○ ○ ○ http://rocodev.com
  8. 8. ○ ○ ○○ http://rocodev.com
  9. 9. ○ ○ ○○ ○ http://rocodev.com
  10. 10. ○ ○ ○○ ○ ○ http://rocodev.com
  11. 11. http://rocodev.com
  12. 12. http://rocodev.com
  13. 13. ○ http://rocodev.com
  14. 14. ○○ http://rocodev.com
  15. 15. ○○○ http://rocodev.com
  16. 16. ○○○○ http://rocodev.com
  17. 17. http://rocodev.com
  18. 18. http://rocodev.com
  19. 19. ○ http://rocodev.com
  20. 20. ○ ○ http://rocodev.com
  21. 21. ○ ○ ○ http://rocodev.com
  22. 22. ○ ○ ○ ○ http://rocodev.com
  23. 23. ○ ○ ○ ○○ http://rocodev.com
  24. 24. ○ ○ ○ ○○ ○ http://rocodev.com
  25. 25. ○ ○ ○ ○○ ○ ○ http://rocodev.com
  26. 26. ○ ○ ○ ○○ ○ ○ ○ http://rocodev.com
  27. 27. http://rocodev.com
  28. 28. http://rocodev.com
  29. 29. http://rocodev.com
  30. 30. ○ http://rocodev.com
  31. 31. ○○ http://rocodev.com
  32. 32. ○○○ http://rocodev.com
  33. 33. ○○○○ http://rocodev.com
  34. 34. ○○○○○ http://rocodev.com
  35. 35. ○○○○○○ http://rocodev.com
  36. 36. http://rocodev.com
  37. 37. http://rocodev.com
  38. 38. http://rocodev.com
  39. 39. ○○○○○ http://rocodev.com
  40. 40. ○○○○○ http://rocodev.com
  41. 41. @font-face { font-family: web-font; src: url(web-font.eot?) format(eot), IE url(web-font.woff) format(woff), Chrome, Firefox... 未來標準 url(web-font.ttf) format(truetype), Safari, Firefox, Opera url(web-font.svg) format(svg); Legacy iOS font-weight: normal; font-style: normal;} http://rocodev.com
  42. 42. http://rocodev.com
  43. 43. http://rocodev.com
  44. 44. 救世主http://rocodev.com
  45. 45. data
  46. 46. http://rocodev.com
  47. 47. http://rocodev.com
  48. 48. http://rocodev.com
  49. 49. demo 1 http://rocodev.com
  50. 50. demo 2 http://rocodev.com
  51. 51. demo 3 http://rocodev.com
  52. 52. demo 4 http://rocodev.com
  53. 53. demo 5 http://rocodev.com
  54. 54. demo 6 http://rocodev.com
  55. 55. http://rocodev.com
  56. 56. // html<h1 class="type1"> <span class="char1">黑</span> <span class="char2">與</span> <span class="char3">白</span> <span class="char4">的</span> <span class="char5">饗</span> <span class="char6">宴</span></h1>// cssh1 span:nth-child(1) {}h1 .char1 {} http://rocodev.com
  57. 57. demo 7 http://rocodev.com
  58. 58. http://rocodev.com
  59. 59. final demo 8 http://rocodev.com
  60. 60. http://rocodev.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×