CSS Unicode-range specific characters using Font-face custom fonts

What is Unicode-range?

A look at the name, a lot of small partners may think is something unusual, in fact, this thing is just a strange name, functional critical moment is still very useful.

Unicode-range is a CSS property that is commonly used in conjunction with @font-face rules.

We should not be in a hurry, then we go down 1.1 points, and now many websites will use Microsoft ya Black font, but the name of Microsoft Ya Black is a bit long:

. Font {    font-family: ' Microsoft Yahei ';}

If the font is not global, it is annoying to write it all at once. Although, now sass, less and other things can make it a variable, but the amount of CSS code is still not reduced. In fact, we can use the native characteristics of @font-face to simplify our cost and reduce the amount of code, as follows:

@font-face {  font-family:yh;  Src:local ("Microsoft Yahei");

Then, to use the font of the Microsoft Jas font, do not use the length of a very strong string, directly Koko:

. font {    font-family:yh;}

The font is Microsoft ya Black font, good remember and easy to use, this is the real strength of @font-face ... Part of it.

imac and other Apple on the machine as if the default does not have Microsoft ya black font, we want to use the Mac OS x system on the font, the window System on the black font, is also possible, we may wish to name the font name as base (full capitalization for the custom), and then:

@font-face {  font-family:base;  Src:local (' Pingfang SC '),       local ("Microsoft Yahei");

Thus, our fonts are more intelligent, to use direct:

. font {    font-family:base;}

Results under Windows System:

Under OS x System:

If you are interested, you can also ruthlessly click here: Ya black Het avatar more streamlined name demo

Would have been happy, but the sharp designers suddenly found that Microsoft ya Black font quotation marks, before and after the same length is the same, a large paragraph of the content of the article does not matter, but if it appears in the big Slogon, obviously, not the best performance, so put forward such a demand, hope that the quotation marks are all the song body, And the other fonts are still Apple or Microsoft Jas Black.

If this requirement, we can have the following methods:

1. Xiao-Li to move to the situation to veto the demand, but you also less a designer to take the opportunity;

2. Apply a span tag to the outside of the quotation marks, and then set the song body. However, if our content is dynamic, ah oh, estimated to be troublesome, we need content output when the match is replaced.

3. Using the Chinese font generation tool such as the word spider, generate a font with only quotes and quotes, assuming that font-family is named quote, the following CSS:

. font {    font-family:quote, BASE;}

But the song body system has, this additional generation plus additional requests are cost AH.

4. Use the Unicode-range in this article, that is, we use Unicode-range to specify the quotation marks using the Arial. The following CSS code:

@font-face {  font-family:base;  Src:local (' Pingfang SC '),       local ("Microsoft Yahei"); @font-face {  font-family:quote;  Src:local (' SimSun ');      unicode-range:u+201c, u+201d;}. Font {    font-family:quote, BASE;}

At this point, the original quotation marks in one direction become more traditional and straightforward (see):

If you want to see it in your new eyes, you can click here: Unicode-range control specific characters using a specific font demo

Here, the Firefox browser has a big pit, I climbed out to spend a good while, is the Firefox browser font Pinyin name case sensitive, that is, the local (' SimSun ') Firefox will initially browser default font to handle, some pits, we need to pay attention.

The above 4 practices, discerning eye can be seen, Unicode-range is the lowest cost and the best way to achieve the effect. I wonder if you were interested in Unicode-range?

Second, the value and syntax of Unicode-range

The value of Unicode-range, as shown in the name, is a Unicode value, which is u+ and several numbers or letters that can represent various characters and literals, with the initial value: U+0-10FFFF, which is all character sets.

The syntax is as follows, refer to self MDN:

/* Supported values */unicode-range:u+26;               /* Single character encoding */unicode-range:u+0-7f;unicode-range:u+0025-00ff;        /* character encoding interval */unicode-range:u+4??;              /* Wildcard interval */unicode-range:u+0025-00ff, u+4??; /* Multiple values */

Among them, u+4?? Some small partners may not know what the meaning of,? Can be understood as a placeholder, representing the value of 0-f, therefore, u+4?? Represents from u+400 to U+4FF.

We sweep the Unicode-range syntax should know the composition of its property values, that is, u+ to keep up with the corresponding character charcode value.

As a result, the front-end domain character representation is another member:

1. Use & #x配上charCode值 for character output in HTML;

2. In JavaScript file to prevent garbled escape, it is \u with charcode value;

3. In a CSS file, such as the content property of a CSS pseudo-element, use \ with the CharCode value directly.

4. Unicode-range is u+ with charcode value.

What are the common Unicode value ranges? And how do I get the Unicode value of any character?

Common Unicode values of unicode-range and their acquisition

For our Chinese users, the following are the most commonly used:

Kanji: [0x4e00,0x9fa5] (or decimal [19968,40869])

Number: [0x30,0x39] (or decimal [48, 57])

lowercase letters: [0x61,0x7a] (or decimal [97, 122])

Capital letters: [0X41,0X5A] (or decimal [65, 90])

For more detailed coding of Chinese characters, I have deliberately organized a page, and can preview the corresponding character range of all character content. You can really click here: Chinese character Unicode encoding range collation Demo

The effect is as follows:

The Chinese characters on the left are clickable, and then I take the time to do a page that previews the Unicode-range range character content, such as the unicode-range corresponding character display tool and the basic Kanji demo

After the address of the range= write on the corresponding Unicode-range range of content, you can know that the corresponding are those characters, for example, the above syntax there has been u+0025-00ff, we look at what the corresponding content, we changed the URL after the change to such as:

The result originally refers to these characters:

　　How is a specific character Unicode value obtained?

That's what I'm going to do. The gadget mentioned in the article "Using & #x3000, etc. for minimum cost Chinese alignment", you can click here: any character converted to HTML Recognition Format Tool page

For example:

The above A9 is the CharCode value we need,& #x是在HTML中显示字符实体用的, here do not tube, and then set in the Unicode-range attribute value is u+9au+a9, the beginning of the song body quotes example, I use this tool to get to u+ 201c and u+201d.

Four, unicode-range suitable for use of the scene

I saw some of the front-end partners using the Unicode-range scene is this, a piece of content, English numbers, etc. using a font, Chinese using another font, so, using Unicode-range to get a custom code, looks cool, After all, the use of a lot of people do not know the unicode-range, in fact, this is not unicode-range really suitable for the application scenario (although it does achieve the effect), why?

For example, you want the digital English is Helvetica font, Chinese is Apple or Microsoft ya Black, directly put the English font in front of it!

. font {    Font-family:helvetica, ' Pingfang SC ', ' Microsoft Yahei ';}

Because, as far as I know, these English fonts are not mapped in Chinese character sets, that is, English fonts actually do not have any effect on Chinese. Considering the Font-family font parsing is the same as in the past, so, naturally the above code number English is Helvetica font, Chinese is Apple or Microsoft ya Black, do not need to use unicode-range do thankless things.

What exactly is the scene that unicode-range suitable for use?

In my opinion, it is suitable to do special font processing in some parts of Chinese content, or some characters in English font to do special font processing. For example, the case of using the Arial quotation marks above, because they are all Chinese fonts, is the value of using Unicode-range.

V. Compatibility of Unicode-range

I wipe, Caniuse can't open.

For compatibility-related JSON data, see here.

The MDN appears as:

Basically, the Ie9+ browser starts to support, Firefox 44 starts to support good, as for chrome and mobile, we can naturally play happily. Overall, the compatibility is very good, at least in the actual project use I feel very OK. IE8 what the font effect almost almost, after all, is not the effect of the CSS properties of the feature.

Vi. Conclusion

When dealing with unicode-range, suddenly sigh, if the @font-face rule can define the text of the default color is good, so that we want to achieve in the front-end search highlighting, there is no need to do anything to HTML, Directly to the search for the content of the conversion to Unicode encoding, using unicode-range matching, automatically become, that is bad, unfortunately not supported. After all, just the font match does not seem obvious.