Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "unicode-range specific character custom font method is what", the content is detailed, the steps are clear, the details are handled properly, I hope this "unicode-range specific character custom font method is what" article can help you solve doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge bar.

What is unicode-range?

Look at the name, many friends may think it is something strange, in fact, this thing is just a strange name, the function is still very useful at critical moments.

Unicode-range is a CSS attribute that is commonly used with the @ font-face rule.

We should not be in a hurry, let's go down a little bit, now many websites will use Microsoft yahei font, but the name of Microsoft yahei is a bit long:

.font {font-family: 'microsoft yahei';}

If the font is not global, it is annoying to write it every time you use it. Although things like Sass and Less can make it a variable now, the amount of code in CSS is still not reduced. In fact, we can use the native feature @ font-face to simplify our cost and reduce the amount of code, as follows:

Font-face {font-family: YH; src: local ("microsoft yahei");}

Then, next, if you want to use the Microsoft Yahei font, don't use the long, compelling string, just Koko:

.font {font-family: YH;}

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

IMac and other Apple computers do not seem to have Microsoft yahaki font by default. We hope to use Apple font on Mac OS X system, and yaheen font on window system, which is also possible. We might as well name the font BASE (all uppercase means custom), and then:

@ font-face {font-family: BASE; src: local ('PingFang SC'), local ("Microsoft Yahei");}

As a result, our fonts are smarter, using directly:

.font {font-family: BASE;}

Results under the windows system:

Under the OS X system:

If you are interested, you can also click here: Yahei and Apple avatar are more concise name demo.

Originally everyone was happy, but the keen designer suddenly found that the quotation marks of the Microsoft Yahei font look the same before and after, and it doesn't matter in the content of a large article, but if they appear in the big slogon, obviously, it is not the best performance, so they put forward such a demand, hoping that all the quotation marks are in Song style, while the other fonts are still Apple or Microsoft Yahi.

If there is such a need, we can do the following:

Be reasonable and emotionally reject this need, but you also lose a chance to show your skills in the designer.

Apply a span tag to the quotation marks, and then set the Arial style. However, if our content is dynamic, ah, oh, it will probably be troublesome, and it will need to be matched and replaced when the content is output.

Use a Chinese font generation tool such as tarantula to generate a font with only upper and lower quotation marks. Assuming that font-family is named quote, then the following CSS:

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

However, there are all Song system, and it is a cost to generate additional requests.

Use the unicode-range in this article, that is, we use unicode-range to specify the use of Arial for quotation marks. The CSS code is as follows:

@ font-face {font-family: BASE; src: local ('PingFang SC'), local ("Microsoft Yahei");} @ font-face {font-family: quote; src: local (' SimSun'); unicode-range: quote; src 201c, Utility 201d;} .font {font-family: quote, BASE;}

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

If you want to see something new, you can click here: unicode-range controls specific characters to use specific fonts demo

Here, there is a big hole under the Firefox browser, and it took me a long time to climb out, that is, the Firefox browser is case-sensitive to the pinyin name of the font, that is, local ('simsun') Firefox will deal with the default font in the original browser.

The above four practices, discerning people can see that unicode-range is the lowest cost and the best way to achieve. I wonder if you are beginning to be interested in unicode-range?

Second, the value and syntax of unicode-range

The value of unicode-range, as the name suggests, is the unicode value, which is U+ and several numbers or letters that can be followed by various characters and characters. The initial value is: Utop0-10FFFF, that is, all character sets.

The syntax is as follows, referenced from MDN:

/ * supported values * / unicode-range: Ubun26; / * single character encoding * / unicode-range: Ubun0-7F; unicode-range: Uzz0025-00FF; / * character encoding range * / unicode-range: Ubun4 characters; / * wildcard intervals * / unicode-range: Ubun0025-00FF, Ubun4 characters; / * multiple values * /

Among them, Upright 4mm? Some friends may not know what that means. It can be understood as a placeholder, which represents the value of 0murf, so it is a placeholder. Represents from Utility 400 to U+4FF.

We should scan the syntax of unicode-range to know the composition of its attribute value, that is, U+ follows the charCode value of the corresponding character.

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

1. The character output in HTML uses & # x with charCode value

two。 To prevent garbled escape in the JavaScript file,\ u is matched with the charCode value.

3. In the CSS file, such as the content attribute of the CSS pseudo-element, use\ with the charCode value directly.

4. Unicode-range is U+ with charCode value.

What are the commonly used ranges of unicode values? And how to get the unicode value of any character?

Third, the common unicode value of unicode-range and its acquisition

For us Chinese users, the most commonly used ones are as follows:

Chinese character: [0x4e00re0x9fa5] (or decimal [19968p40869])

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

Lowercase letters: [0x61j0x7a] (or decimal [97122])

Capital letters: [0x41jue 0x5a] (or decimal [65,90])

For more detailed coding of Chinese characters, I have specially organized a page and can preview all the character content in the corresponding character range. You can click here: unicode coding range of Chinese characters to sort out demo

The effect of the screenshot is as follows:

The Chinese characters on the left are clickable, and then, by the way, I took the time to make a page that can preview the content of unicode-range characters, such as unicode-range corresponding character display tool and basic Chinese character demo.

Write the corresponding unicode-range range content in the range= at the end of the address, and you can know which characters are corresponding. For example, for the Ubun0025-00FF that appeared in the above syntax, let's see what it corresponds to. Let's change the url to the following figure:

The result originally refers to these characters:

How to get the unicode value of a specific character?

This requires the gadget I mentioned in the article "using equal spaces to achieve minimum cost Chinese alignment". You can click here: convert any character to HTML recognition tool page

For example:

The above a9 is the charcode value we need. & # x is used to display character entities in HTML. Never mind here, and then set forever in the unicode-range attribute value is U+9aU+a9. In the initial example of Arial quotation marks, I used this tool to get Utility 201c and Utility 201d.

4. Scenarios where unicode-range is suitable for use

I see that some front-end partners use unicode-range like this, one paragraph of content, English numbers, etc., use one font, Chinese uses another font, so, use unicode-range to get a custom encoding, it looks cool, after all, many people do not know the use of unicode-range, in fact, this is not really suitable for unicode-range application scenario (although it does achieve the effect), why?

For example, if you want digital English to be Helvetica, and Chinese to be Apple or Microsoft Acer, just put the English font in front of you!

.font {font-family: Helvetica, 'Pingfang SC',' microsoft yahei';}

Because, as far as I know, these English fonts do not have Chinese character set mapping, that is, English fonts actually have no effect on Chinese. Considering that the font parsing of font-family is from front to back, it is natural that the above code numbers are Helvetica fonts in English and Apple or Microsoft Yahei in Chinese, so there is no need to use unicode-range to do thankless things.

So what are the scenarios where unicode-range is suitable for use?

In my opinion, it is appropriate to do special font processing for some Chinese characters in Chinese content or some characters in English fonts. For example, the above use of Song quotation marks in the case, because they are all Chinese fonts, so there is the value of using unicode-range.

5. Compatibility of unicode-range

Damn it, caniuse won't open.

For compatibility-related JSON data, see here.

The MDN appears as follows:

Basically, IE9+ browsers began to support, Firefox 44 began to support good, as for Chrome and mobile, everyone can have fun. All in all, compatibility is very good, at least in the actual project use I think it is very OK. The font effect of IE8 is almost close, after all, it is not a CSS attribute that affects the function.

After reading this, the article "what is the method of customizing fonts for specific unicode-range characters" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.