Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to use characters instead of pictures to achieve fillet or sharp corners in web development

2025-01-21 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article mainly introduces how to use characters instead of pictures to achieve fillet or sharp corners in web development. This article is very detailed and has a certain reference value. Interested friends must finish reading it!

Please take a look at the following picture I took from the Google gmail page (this is my second screenshot in the same place):

In the picture, the small downward triangle in the red circle is the character used, not the mainstream character. In fact, Google Google this character is only a small application, the real potential of characters has not been realized, and this article will explore how to use characters instead of pictures to achieve sharp corners that seem to be achieved only by pictures, or fillet effects that are mostly achieved by pictures. I am not in-depth in the study of character flying, so some conclusions or methods are not optimal, and later there may be more perfect methods, so the title of this paper adds the word beta, table test. Some of the methods mentioned in this article may not be practical in practical projects, the key is to help colleagues broaden their thinking and show the potential of characters in web development.

Note: the "character" in this article mainly refers to the characters with special shapes that can not be entered directly by the keyboard. Although the English alphabet ABC is also a character, the meaning of the word "character" mentioned in this article does not contain such common characters.

First, understand some characteristics of characters

1. See the truth clearly

As for the characters, my understanding is that they belong to the same thing as the Chinese characters and English letters on the page. First of all, the character pattern is made up of a pixel of the same color on the display, so there will be no trouble of jagged edges. If you use photoshop to make a small triangle picture, there may be abominable white edges, and characters will never have this problem. Secondly, characters are essentially text, limited by the font-size attribute of css, color attribute and other attributes that play a role in the text.

2. The advantages of using characters instead of pictures

① does not have to do drawing and matting, how much effort has been saved! For page engineers, the workload is greatly reduced, you know, dealing with small images less than 10 pixels takes a lot of time and energy.

② does not have to worry about miscellaneous edges, the characters are solid color pixels, it is difficult to appear miscellaneous edges.

③ is easy to control! If you want the character pattern to become larger, font-size can set it to a larger one, and to change the color, use color. So, the characters are good and easy to control. If the picture, you let him change color to try, you are not Liu Qian, you are not Harry bit, so you can't.

The ④ page load size has become smaller. Anyone who studies computer should know that one byte of an English character and two bytes of a Chinese character. Although I don't know whether the characters of different shapes are patriots or foreigners, anyway, there are at most two bytes (unit b). If the picture, although I have not verified it, but according to experience, it should take up more space than characters.

⑤ in theory, there are fewer page link requests. Why is it called theoretically? because in fact, pictures are all integrated into a single picture (css Sprite), so even without a small image, the number of requests for pictures on the whole page remains the same. But if this little picture is independent, is there soon one less picture request? That server can be happy!

3. Defects of characters

① performance under different browsers.

Now assume that the IE browser represents China and the Firefox browser represents Korea. A Chinese woman (♀) went to South Korea and turned out to look different. The term is: some characters behave differently in different browsers. This kind of inconsistency is divided into two categories, one is due to plastic surgery, changed a face, this is hopeless, want to go back to the past is more difficult than to ask Lin Zhiling to beat your back; the other is beauty, using Chanel or Estée Lauder cosmetics to maintain for a month, as a result, Sister Lotus changed greatly, the ugly duckling became a beautiful duckling, and it was saved to work as a programmer for two months and guarantee to go back to the past. Being a programmer is just a joking metaphor, which is actually achieved by setting fonts (font-family) to achieve consistent performance, which will be discussed later in this article.

It is difficult to control the size and location of ②.

Characters are essentially different from pictures, there is no clear height and width, if you do not know enough about the characteristics of the text on the page, it is troublesome to achieve accurate and compatible positioning. There is also the character to the page encoding method, which font is sensitive. For example, some characters display well in gb3212 Chinese coding, but in utf-8 coding it is a box-garbled; it shows well in Song style, but it looks different in other fonts.

③ cannot achieve a gradient effect.

2. Some examples of the relationship between characters and fonts

The first part of the demo page shows some of the characters that may be used in common fonts related to the body of this article. The following picture shows the representative character differences due to different fonts and browsers, but fortunately we can get compatibility by trying different fonts.

Differences of characters in different fonts and different browsers

Third, use characters to achieve rounded rectangles and sharp corners.

To use characters for fillet or sharp corners, some of the following characters can be used:

Left and right sharp angle "< >"; upper and lower sharp angle "∧∨"; solid sharp angle "► ◄ ▲▼"; solid circle: "●"; hollow circle "○"; 1/4 hollow circle "╰ ╯╭ ╮" and regular prism "◆". I. the relationship between font and character display

Here is the sharp corner in the left and right direction, the font is Song style:

Unaffected by fonts: < >

Here is the sharp corner in the left and right direction, the font is Arial:

Unaffected by fonts: < >

Here is the sharp corner in the left and right direction, the font is Lucida Sans Unicode:

Unaffected by fonts: < >

Here is the sharp corner in the left and right direction, the font is Times New Roman:

Unaffected by fonts: < >

Here is the sharp corner in the left and right direction, the font is Verdana:

Unaffected by fonts: < >

Here the sharp corners in the upper and lower directions, the font is Song style, and the small sharp corners: "^"

Font-independent type: ∧∨

Here is the sharp corner in the up and down direction, the font is Arial, and the small sharp corner: "^"

Font-independent type: ∧∨

Here is the sharp corner in the up and down direction, the font is Lucida Sans Unicode, and the small sharp corner: "^"

Font-independent type: ∧∨

Here is the sharp corner in the up and down direction, the font is Times New Roman, and the small sharp corner: "^"

Font-independent type: ∧∨

Here is the sharp corner in the up and down direction, the font is Verdana, and the small sharp corner: "^"

Font-independent type: ∧∨

Here is a 45-degree sharp angle, the font is Arial: ∠

Here is a 45-degree sharp-angled polygon solid with the font Arial: ∠

Here is a 45-degree angle with the font Lucida Sans Unicode: ∠

Here is a 45-degree angle with the font Times New Roman: ∠

Here is a 45-degree angle with the font Verdana: ∠

Here is the solid sharp corner, the font is Arial: ► ◄ ▲▼

Here is the solid sharp corner, the font is Arial: ► ◄ ▲▼

Here is the solid sharp corner, the font is Lucida Sans Unicode: ► ◄ ▲▼

Here is the solid sharp corner, the font is Times New Roman: ► ◄ ▲▼

Here is the solid sharp corner, the font is Verdana: ► ◄ ▲▼

Here is the solid circle, due to the limited size, similar to a hexagonal solid, the font is Song: ●

Here is the solid circle, which, due to its limited size, behaves like a hexagonal solid with a font of Arial: ●

Here is the solid circle, which, due to its limited size, behaves like a hexagonal solid with a font of Lucida Sans Unicode: ●

Here is the solid circle, which, due to its limited size, behaves like a hexagonal solid with a font of Times New Roman: ●

Here is the solid circle, which, due to its limited size, behaves like a hexagonal solid with a font of Verdana: ●

Here is a hollow circle with the font of Song style: ○

Here is a hollow circle with the font Arial: ○

Here is a hollow circle with the font Lucida Sans Unicode: ○

Here is a hollow circle with the font Times New Roman: ○

Here is a hollow circle with the font Verdana: ○

Here is the 1/4 arc, the font is Arial: ╰ ╯╭ ╮

Here is the 1/4 arc with the font Arial: ╰ ╯╭ ╮

Here is the 1/4 arc with the font Lucida Sans Unicode: ╰ ╯╭ ╮

Here is the 1/4 arc with the font Times New Roman: ╰ ╯╭ ╮

Here is the 1/4 arc with the font Verdana: ╰ ╯╭ ╮

Fourth, realize the rounded rectangle of the solid color background

Fill four corners with 1/4 solid circles to achieve a fillet effect with a background color.

The code is as follows:

The code is as follows:

There is a parity bug under .sharp _ square {width:333px; height:110px; background:#a0b3d6; position:relative; color:#a0b3d6;} / * IE6. In order to avoid a 1 pixel error, the height and width are even * /

.sharp _ square .quarter _ round {position:absolute;}

.sharp _ square .quarter _ round span {background:white;}

.sharp _ square .round _ lt {left:-1px; top:0px;}

.sharp _ square .round _ rt {right:-1px; top:0px;}

.sharp _ square .round _ lb {left:-1px; bottom:0px;}

.sharp _ square .round _ rb {right:-1px; bottom:0px;}

These are all the contents of the article "how to use characters instead of pictures to achieve rounded corners or sharp corners in web development". Thank you for reading! Hope to share the content to help you, more related knowledge, 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.

Views: 283

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report