Use icon fonts to render place labels and colors on online maps

When the pre-array is used for online mapping, there is a need for the location to be labeled to render the color according to the interval segment. Of course, you can use the tag to simulate the square, triangle, and then fill the color, with CSS3 can also simulate some of the circle out, but to be compatible with the evil IE7, and second, but also good-looking.

In recent years, the popular icon font on mobile browsers has come in handy, and most importantly, IE6 supports it. is the map rendering effect after using the icon font, is not very good?

Using the icon font to generate icons with respect to image-based icons has the following benefits:
1. Freedom of change size
2. Free to modify color
3. Add a shadow Effect
4.ie6 can also support
5. Other properties that support picture icons, such as transparency and rotation, etc.
6. You can add properties such as Text-stroke and Background-clip:text, as long as the browser supports

How do I get the icon font? Here I recommend Iconmoon this website, use it you can upload svg or font to generate the icon font you need, or directly download its existing icon font, Iconmoon built up a lot of useful icons, The most convenient place is that once you choose the icon font you want to download, it has helped you to generate a compatible with all browser css files and font files, even the demo page to help you generate, as shown in:

Then you just need to dynamically create a span tag with the specified style.

How to color, you have to decide!

Font files have the following:

In the end , there is a small problem with chrome that needs to be dealt with, because Chrome defaults to reading the Woff font file, and it will show jagged edges when rendering woff font files!

How to solve this problem? Chrome's rendering of SVG font files is very smooth and perfect. So we just use CSS3 's hack way to let chrome just read the SVG font file!

@font-face {font-family: ' Icomoon '; Src:url (' Icomoon.eot?74r1vd '); Src:url (' Icomoon.eot? #iefix74r1vd ') format (' Embedded-opentype '), url (' ICOMOON.WOFF?74R1VD ') format (' Woff '), url (' ICOMOON.TTF?74R1VD ') format (' TrueType '), url (' Icomoon.svg?74r1vd#icomoon ') format (' SVG '); font-weight:normal;font-style:normal;} @media screen and (-webkit-min-device-pixel-ratio:0) {@font-face {font-family: ' Icomoon '; Src:url (' Icomoon.svg?74r1vd #icomoon ') format (' SVG '); font-weight:normal;font-style:normal;}}

Add the following @media screen and (-webkit-min-device-pixel-ratio:0) CSS, because this code only supports CSS3 features of the browser can be recognized.

Well, the said are finished, I reproduced the original article also please indicate the source Oh, thank you! ^_^~

Use icon fonts to render place labels and colors on the online map