Home Web Front-end HTML Tutorial The expression of Chinese fonts in CSS_html/css_WEB-ITnose

The expression of Chinese fonts in CSS_html/css_WEB-ITnose

Jun 24, 2016 am 11:53 AM

When writing a website style sheet, you will inevitably use some Chinese fonts, such as Microsoft YaHei, HeiTi, etc. Unless you are building an English site, or you are willing to use it for browsing the entire site If the font is the default font of the device, then I am convinced by U. The method of writing Chinese fonts in CSS generally uses font-family: "Microsoft Yahei", "Heidi"; similar expressions. However, for a platform like WordPress that requires UTF8 encoding, if you don't pay attention and don't convert the encoding, it will be a problem. This will cause the Chinese fonts to be unable to be shaped as expected. So we can express Chinese in the form of English and unicode. For example, the font-family just now: "Microsoft Yahei", "Heidi"; can be written as font-family: "Microsoft Yahei", "SimHei"; Look like this Can they be unified a little bit?

There are so many Chinese fonts corresponding to English and Unicode that I can’t memorize them all, so I collected a table to collect and record them. I hope this is what you want too:

中文名 英文名 Unicode Mac OS Windows Office
华文细黑 STHeiti Light [STXihei] 534E65877EC69ED1
华文黑体 STHeiti 534E65879ED14F53
华文楷体 STKaiti 534E658769774F53
华文宋体 STSong 534E65875B8B4F53
华文仿宋 STFangsong 534E65874EFF5B8B
丽黑 Pro LiHei Pro Medium 4E3D9ED1 Pro
丽宋 Pro LiSong Pro Light 4E3D5B8B Pro
标楷体 BiauKai 680769774F53
苹果丽中黑 Apple LiGothic Medium 82F9679C4E3D4E2D9ED1
苹果丽细宋 Apple LiSung Light 82F9679C4E3D7EC65B8B
新细明体 PMingLiU 65B07EC6660E4F53
细明体 MingLiU 7EC6660E4F53
标楷体 DFKai-SB 680769774F53
黑体 SimHei 9ED14F53
宋体 SimSun 5B8B4F53
新宋体 NSimSun 65B05B8B4F53
仿宋 FangSong 4EFF5B8B
楷体 KaiTi 69774F53
仿宋_GB2312 FangSong_GB2312 4EFF5B8B_GB2312
楷体_GB2312 KaiTi_GB2312 69774F53_GB2312
微软正黑体 Microsoft JhengHei 5FAEx8F6F6B639ED14F53
微软雅黑 Microsoft YaHei 5FAE8F6F96C59ED1
隶书 LiSu 96B64E66
幼圆 YouYuan 5E7C5706
华文细黑 STXihei 534E65877EC69ED1
华文楷体 STKaiti 534E658769774F53
华文宋体 STSong 534E65875B8B4F53
华文中宋 STZhongsong 534E65874E2D5B8B
华文仿宋 STFangsong 534E65874EFF5B8B
方正舒体 FZShuTi 65B96B6382124F53
方正姚体 FZYaoti 65B96B6359DA4F53
华文彩云 STCaiyun 534E65875F694E91
华文琥珀 STHupo 534E6587742573C0
华文隶书 STLiti 534E658796B64E66
华文行楷 STXingkai 534E6587884C6977
华文新魏 STXinwei 534E658765B09B4F

It’s very comprehensive, but don’t be happy too early, because we have an army of browsers with one rule for everyone. Even Firefox, which holds the banner of perfectly supporting CSS, has some unsatisfactory aspects, because Firefox does not actually The above aliases are supported. For it, "Microsoft Yahei" is not Microsoft Yahei. It can only feedback the results of the browser's default font. Alas, too many browsers are not good. It is better to go back to the era of IE monopoly. There is no In comparison, there are no complaints.
Web-dimensional tutorial website http://www.wangwenzl.cn/


Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

How to implement adaptive layout of Y-axis position in web annotation? How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

HTML, CSS, and JavaScript: Essential Tools for Web Developers HTML, CSS, and JavaScript: Essential Tools for Web Developers Apr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

See all articles