How to solve the font problem that the designer left you in the Web page?

Article Source: http://www.zretc.com/technologyDetail/429.html

In some of the promotional activities on the page, the designer may need to use a lot of good-looking fonts, such as: Founder of the Arts. TTF, Fangzheng Orchid Pavilion, founder Meow. TTF, etc. (Omit n fonts here).

When the designers use these special fonts, the front-end siege lion students often because these fonts "too personality" and worry. Today, Xiao Zhuo for everyone to share some experience, practical and classic, hope to be able to help the work of children's shoes!

• Method One: Tangent graph method

• Method Two: Font-spider Introduction and use

• Font-spider Automation Building Tools Gulp Introduction and use

Step into the chase:

Coping with the "font" of the designer, there are two ways to solve the problem for students to choose, one way is that we are familiar with the commonly used Transduction method, method Two is today's article focuses on the Font-spider.

Method One: Tangent graph method

Most of the active pages are used in a way that stores fonts as a single small picture, which is simply rude.

Have the pros and cons of the pattern of concern, presumably we all have the same feelings with the small Zhuo. The Transduction method is easy to use and the effect is exactly the same as the design. However, it also has many shortcomings, such as: If only a few pictures, the pattern is simple and efficient, but if there are dozens of pictures of hundreds of photos to use it ... Whether it's a cut or a late modification is a nightmare.

Method Two: Font-spider

What is Font-spider:

The word spider obtains characters that are not used in Webfont by parsing local CSS and HTML files, and removes these character data from the font for compression, while generating a format that is used across browsers.

Chinese fonts are 10m+ in size so that we cannot directly reference font files. In layman's terms, Font-spider is the use of text in HTML, packaged separately into a new font file. So, how exactly should it be done? and see the following explanations.

How to use Font-spider

First step: Install Font-spider

To install Font-spider using node. JS:

NPM Install Font-spider-g

(Note: node.js:https://nodejs.org/en/)

Step two: Use Webfond in your project

Project directory:

Introduce font.css in HTML

Declare a new font, and we'll name it "FZ".

Part III: Run the Run font-spider command:

Font-spider demo.html

We can find that the page depends on the font will be automatically compressed, the 1986KB font file compression into a few KB of new fonts, and according to the compatibility of different browsers to package different types of files.

The original word will also be backed up, so let's look at the resulting directory structure:

4 font files appear after compression, which we have introduced in CSS. Our original files are backed up to the. Font-spider directory.

The effect after execution:

How do I use the automated build Tool gulp real-time automatic compilation?

In real development, we certainly do not want to go to the command line Input font-spider command after each save code to compile, this time need to rely on the automated build tool to do real-time compilation.

Here we recommend using Gulp (because it is easy to get started).

First Step: Install Gulp

If you have not installed Gulp, use NPM to install gulp globally.

NPM Install--global Gulp

Under the project root directory, install gulp, Gulp-font-spider, Gulp-watch as a project development dependency (Devdependencies):

NPM Install Gulp Gulp-font-spider--save-dev

(Note ①:gulp-font-spider is a font-spider-based gulp plug-in)

(Note ②:gulp-watch can monitor the file save)

Step Two: Configure Gulp

Create the Gulpfile.js file under the project root directory.

1. The introduction of Gulp, Gulp-font-spider, Gulp-watch and other three project development dependencies.

2. Configure Gulp-font-spider, and Gulp-watch monitor demo.html to automate Font-spider.

The project directory structure at this time:

Step three: Execute the Gulp command

At this point we'll change the contents of the H1 tag to "I'm using gulp! "and save.

Returning to the command-line tool, we will find that Gulp has helped us automate the Font-spider.

Look at the effect:

For more information, please go to the technical knowledge base!

How to solve the font problem that the designer left you in the Web page?