smile-o   meh-o  frown-o

https://fontawesome.com/v4/icon/smile-o

https://fontawesome.com/v4/icon/meh-o

https://fontawesome.com/v4/icon/frown-o

fontpath = "C:/Windows/Fonts/NanumBarunGothic.ttf"

[python] SyntaxError: (unicode error) 'unicodeescape' codec can't decode bytes in position 2-3: truncated \UXXXXXXXX escape 에러 해결법

\를  /로 변경해서 적용하니까 에러 안남. 

[FONT] Google Noto Font 

Beautiful and free fonts for all languages

https://www.google.com/get/noto/

...

FlowType.js: Better responsive typography

FlowType.js sets your font-size and line-height based on your element width, making your typography fully responsive. You’ll have the perfect number of characters per line regardless of screen size.

Why Web Icon Fonts are brilliant

http://www.crearegroup-webdesign.co.uk/blog/videos/web-icon-fonts.html

My brother James and I have been chatting a lot over the past week about how amazing Icon Web Fonts are, so I’ve put together a little video blog to show the key benefits. If you’re unfamiliar with Icon Fonts, they’re not too dissimilar from Wingdings. They’re useful, lightweight, modern typefaces that are perfect for displaying icons on your website without the baggage that often comes with using images.

Now we’ll talk about these specific Icon Fonts in a moment, but typefaces like Font Awesome, which is free, or Fico carry huge benefits to designers – which is probably why they’ve been so popular with web designers in 2012.

You can think of Icon Fonts as any normal font or web-font. As a designer you can easily adjust the size, colour and even add shadows with CSS. Icon Fonts work in almost all browsers including IE6, which means you get transparency without messing around with any ugly hacks. Most importantly, a lightweight or hand-picked Web Icon Font will load quicker in the browser that it’s image counterpart which will help with your page-speed optimization.

Web Icon Fonts have been huge in 2012

James and I think there’s 3 simple, key reasons why Icon Web Fonts are so popular in 2012:

1. The icons are simply pretty cool and modern
2. Responsive web design
3. Retina displays.

So with Responsive web-design, there’s a good chance that you might want to increase or decrease an icon’s size, particularly if you’re using it within a button. Just like text, you can use media queries to simply change the type size without needing to reference a different image file. And unlike raster, pixel based images – Icon Fonts are vector so they look crisp at any resolution.

If you haven’t already, we’d recommending heading over to some of the many Icon Fonts available online. Like we mentioned earlier, Font Awesome is a great starting point as their current free set includes over 200 icons and can be installed and used on your website within minutes.

There’s also plenty of premium paid Icon Fonts and also great tools like Fontello where you can create your very own hand-picked, lightweight hybrid Icon Font by combining the best of the free Icon Fonts available.

So, wrapping up – we’re pretty confident that Icon Fonts are going to continue in popularity in 2013. It wouldn’t surprise us if the Google Web Font archive dons a set or two in the near future.

Example results when using Font Awesome, as shown on their web page.

Web Icon Fonts & SEO

Also, don’t worry about the potential SEO headache of having random single letters hanging around your HTML markup. Icon Font Packs, like Font Awesome for example, have been set-up so that you can render with empty italic tags.

If you refer to the embedded image opposite, and the HTML markup below, you can see how the empty italics tags are used with a class to render icons in a similar fashion to how we might use span tags.

1 2 3 4 5 6 7 8

</pre> <ul class="nav nav-list">     <li class="active"><a href="#"> Home</a></li>     <li><a href="#"> Library</a></li>     <li><a href="#"> Applications</a></li>     <li><a href="#"> Settings</a></li> </ul> <pre>

Thanks for watching this week, check out our supporting post for more resources and live examples of Icon Fonts in action from around the web.

Font Custom is a tool that will generate custom icon webfonts from the comfort of the command line. It is very easy to use, all you have to do is create a directory for your svg and eps files. Then, on the command line, run: fontcustom watch /path/to/vectors
Font Custom will then create the font and CSS file. It will also continue to run and watch the folder for changes, so you don't have to manually re-run it each time you update the vector set.

15 Online HTML5 Tools for Web Designers

by Andy on October 10, 2012

Online HTML5 tools are quite useful for web designers who wants to forge ahead of the competition, and have more satisfied clients. It is of course important to follow developments and keep an eye on new tools that emerge.

HTML5 is the new version of the markup language HTML that has been used for presenting and structuring online contents since the early 90s. It is an internet core technology that was proposed originally by Opera Software. If you want to learn more of it’s background and history these HTML5 infographics can help you. HTML has been standing in the shadow of other frameworks like Flash and IE, but the word is, that this is going to change with the arrival of HTML5. As of today, HTML5 is still being developed, but believe me, it is here to stay.

HTML5 has opened a window of opportunities for web designers. Online web design tools based on HTML5 makes it easier to incorporate audio, video, drag and drop, fonts, animations and graphics into web pages. HTML5 also helps web designers build mobile friendly website themes to ensure excellent user-experience when surfing the Internet on mobile devices. However, since such tools are fairly new, some people may still be unaware of their true potentials. Also, some web designers still want to use Flash and other popular framework as their primary tool set.

Below, I have listed 10 useful online HTML5 tools. They can provide developers and web designers with manoeuvrability in making websites more convenient, productive and attractive.

Moqups – HTML5 App For Creating Wireframes

Moqups is a HTML5 web app for creating wireframes, mockups or UI concepts. You can go to their blog and read more about this highly popular project.

Fontdragr – Online Font Testing Tool

If you are a designer, you might find it difficult to choose a decent font. However, using this online font testing tool can make the process much easier. You can view any font you want in a webpage without changing its CSS or HTML code.

Liveweave – HTML5, CSS3 & JavaScript Playground

Liveweave is a new playground for developers and designers to test HTML, CSS and Javascript. Liveweave editor has built-in context-sensitive autocompletion for HTML4/HTML5 and CSS2/CSS3, that makes life a lot easier.

Adobe Edge Animate

Edge Animate will allow you to create animated and interactive web contents. It has an easy to use and intuitive interface, precise control, broad reach and more.

HTML KickStart

HTML KickStart is not really a tool, it is a set of HTML5, CSS, and jQuery building blocks for website development. It includes files, layouts, and elements that will give you a headstart and save you hours on your projects.

Stitches – An HTML5 Sprite Sheet Generator

Stitches is a really easy-to-use HTML5 sprite sheet generator. Simply drag and drop image files onto the app, click “Generate” and your sprite and stylesheet will be good to go. Currently compatible only with the latest version of Firefox and Chrome.

Create – Web Editing Interface

Create is a new web editing interface that uses a browser-based HTML5 environment for managing your content. It can be adapted for use with virtually any content management backend.

SpriteBox Online HTML5 Tool

These days, compressing images seems to be the rage. By placing your photos in a Sprite, you can increase the rate of your loading times as well as image transitions. Online Sprite Box Tool will aid in designing photos into sprites with the use of HTML5, CSS3 and jQuery.

Online Velocity Sketch Tool

This unique HTML 5 online canvas drawing tool can make creative, strange looking creations. Use this HTML5 tool to come up with something really awesome for your designs.

On/Off Flipswitch HTML5/CSS3 Generator

A beautifully designed and super-easy-to-use tool for generating your own HTML5/CSS3 “On and Off” flipswitches with optional animated transitions.

Online SVG to HTML5 Canvas Tool

Most vector art packages such as Inkscape and Illustrator can export SVG or Scalable Vector Graphics elements. This tool will allow you to convert SVG files into its HTML 5 canvas equivalent.

Online 3D Sketch Tool

This sketch tool uses the capability of HTML canvas in creating 3D drawing. The tool will allow you to draw with dashed lines and vibrate your drawing. You can also rotate the 3D canvas by dragging with the cursor horizontally while pressing down the Space Bar.

Online Pattern Generator Tool

This is an online tool that can be quite useful for creating header and page backgrounds. Designers can even use the tool to create heading backgrounds. The tool will allow you to try out any pattern you want in just a few seconds.

Online XRay Tool

Online XRay Tool allows designers to quickly view the details of various page elements that are present in any webpage with just a few clicks of the mouse. Just drag the website bookmarklet into your own book bookmarks, go to the webpage you like to analyze, click on the XRay bookmark and then click on any element of the page. The tool can take care of HTML5 elements like canvas and give you the design data you need.

Online HTML5 Audio Maker Tool

Among the best features of HTML5 is the introduction of the audio tag. This tool will help designers get familiar with the newest audio features being offered by HTML5. Even more interesting is the fact that designers can play, not just with audio, but also with video integration using this HTML5 online tool.

Group Discussion!

Please tell us what you think of these HTML5 tools by adding your comments below. And please, if you have considerable experience with an online HTML 5 tool not included in my list, let me know about it. You are also welcome to share this article to your friends and colleagues.