Analysis and application of icon fonts in responsive web graphics

Objective

Pixel perfection (Pixel perfection), resolution-Independent (resolution independent) and multi-platform experience consistency are the designers ' pursuit. Accessibility (accessability), load performance, and refactoring flexibility are topics of concern to front-end engineers.

The current Internet equipment "surging", the display resolution "endless", for Web creators are bringing more and more problems.

Need to prepare @1.5x, @2x, @3x picture footage for high ppi (aka Retina) display equipment;

The need for different screen resolution to adjust the optimal layout;

Need to consider the loading performance problem of multiple resolution versions of the picture;

The semantic and accessibility implications of device versioning (version segmentation);

......

Response-Type Design

The responsive design, as the "Savior", has preached in the Web for years, no less than Mr. "ajax". Its core is: for different equipment and application scene, make reasonable adaptation. Narrowly, it is the Web page at different resolutions with media Qurey to adjust page layout and content display, three keywords: Fluid grids, flexible images, media queries.

Among them flexible images is the most difficult place. As mentioned earlier, today's equipment diversification, different resolution and different PPI to the image adaptation has brought unprecedented complexity. There is no perfect solution to the problem, and the responsive Images and picture Element standards are still being developed by the consortium. But before you do this, you need to adopt a multi-pronged approach and develop different adaptive strategies for different usage scenarios for Media Elements. There are currently three main ways of mainstreaming:

The max-width:100% comes from an adaptive container with the same picture, in different containers, and automatically adapts to the size of the container. The problem is that the large size of the picture in the small screen bandwidth wasted and slow loading.

Multi-version Picture replacement

For background-image that are written in CSS, you can use media query to accommodate versions that display @1x or @2x.

Images in HTML can be adapted using Piturefill.js.

Use vectorization graphics, including

Icon Fonts

Svg

This period we mainly talk about the application of icon fonts.

What is icon fonts?

Using the Font tool to convert our usual web graphics icon (icons) into the Web fonts, it became icon fonts, it can use CSS @font-face embedded in the Web page, to display icons. Because the font is a vector graphics, it is inherently "resolution-independent" characteristics, in any resolution and PPI below, can be done to perfect scaling, not like traditional bitmaps, such as: Png,jpeg, magnified after the sawtooth or fuzzy phenomenon.

Note: The image above is Apple Memorial 30 anniversary of the Web site screenshot, the Web page in a large number of Use icon fonts to shape the release of different generations of products, this type of IOS 7 introduced line style icons, using icon fonts to perform the most appropriate.