Conversion between the font units PX pt em in HTML

Source: Internet
Author: User

In the implementation of the printing function, encountered a problem, using PX as a unit on different machines or printers printed on the font size is not the same, so after the query, found that using PT units can be used for logistics adaptation, the following is the conversion between units:

There are three common units for defining font size, px, EM, PT

Px

PX is a pixel abbreviation and is a pixel-based unit. In the process of browsing the web, the screen text, pictures, etc. will vary with the screen resolution, a 100px width-sized picture, at 800x600 resolution, to occupy the screen width of 1/8, but at 1024x768, only about 1/ 10. So if you define the font size, use PX as the unit, that once the user changes the display resolution from 800 to 1024, the user actually see the text will become "small" (natural length units), even can not see clearly, affect browsing.

Em

EM: That is,%, is the relative unit, is a relative length unit, originally refers to the letter m width, hence the name EM. Now refers to a multiple of the width of the character, using a similar percentage, such as: 0.8em, 1.2em,2em and so on. Usually 1em=16px. , commonly used to measure the length of a common unit (such as the margins and padding of an element turnover), when used to specify the font size, the EM unit refers to the parent element's font size.

Given the font size of a parent element on a page, you can change the size of all elements proportionally by adjusting an element. It can be scaled freely, for example, to make a scalable stylesheet.

Pt

PT is a point (LB) abbreviation and is a fixed-length unit of measure with a size of 1/72 inches. If you use PT for text on the web, the font size is the same as in different screens (the same resolution), which can have an impact on typography, but it is quite handy to use PT in Word. Because the main purpose of using Word is not for screen browsing, it is output printing. When printing to the entity, PT as a natural length unit is convenient and practical: for example, word in the ordinary documents are used "9pt", the title with "Blackbody 16pt" and so on, no matter how the computer set, print it is always so big.

Transformation

the browser's default font height is 16px , so an unadjusted browser is displayed in the 1em=16px , that is to say 1px=0.0625em. To simplify font-size conversion, you can define the body global declaration font-size=62.5% in CSS, which defines the default font size of 16px*0.625=10px, which inherits the font size of the parent element, so 1em=10px, so 12px=1.2em. the PX and em conversions can be obtained by 10. But defining the font-size=0.625em or defining the 12px directly is not effective,


In addition, it is important to note thatwhen IE processing Chinese characters, the accuracy of floating point is limited, the 12px (1.2em) size of Chinese characters obtained by the above method is not equal to the font size defined by 12px directly, but slightly larger. Just change 62.5% to 63%.

the conversion formula for PT and PX is also relatively simple,pt=px times 3/4.

Reference from: http://www.cnblogs.com/dolphinX/p/3237054.html

Conversion between the font units PX pt em in HTML

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.