microsoftyahei font download:Front-end editor's original: How to use fonts chicly and fancy?-Font Tutorial免费ppt模版下载-道格办公

No matter you are a front-end dog, a designer, or a picture maker, you can’t get around the road of fonts. Although this road is not very difficult, there are still some precautions. Please take out your small notebook and take notes :

Use normally

Everyone knows font-family

General import

1	p{}/Chinese script/< /pre>

General note here:

In different systems, the pre-installed fonts are different, so if you refer to the fonts on Windows on the mac, it will not appear normally.

The following are the pre-installed fonts for each system:

Windows operating system
Bold: SimHei
Times New Roman: SimSun
New Song: NSimSun
Imitation of Song Dynasty: FangSong
Italic: KaiTi
Imitation Song GB2312: FangSongGB2312
Italic GB2312: KaiTiGB2312
Microsoft YaHei: Microsoft YaHei (available from Windows 7)
macOS X operating system:
Holly Blackbody: Hiragino Sans GB (available from SNOW LEOPARD)
Chinese fine black: STHeiti Light (also known as STXihei)
Chinese bold: STHeiti
Chinese Kaiti: STKaiti
Chinese Song Style: STSong
Chinese Imitation of Song Dynasty: STFangsong

Let's start fancy use~Sahua~(≧▽≦)/~啦啦啦

Fancy usage

Fancy first trick: introduce multiple fonts at the same time

1234	p{"Times New Roman","Microsoft YaHei", "Microsoft Yahei",STXihei, "Chinese Fine Black",serif;}

Fancy note:

The rules for font-family are:
If the font cannot be found, or if the font does not contain the text to be rendered, the next font is used.
If none of the listed fonts meet your needs, let the operating system decide which font to use.
Priority is given to using fonts listed first.
According to the above rules, font-family should specify English fonts first, and then Chinese fonts. Otherwise, the English letters contained in the Chinese font will replace the English font, which will often be very ugly (ugly).
In order to ensure compatibility, both the Chinese name and the English name of the Chinese font should be written in font-family. For example, the English name of "Microsoft YaHei" is Microsoft YaHei.
In addition, the Chinese names of Chinese fonts, as well as the English names consisting of multiple words, should be enclosed in double quotation marks.

The above pile of concise and rough summary is:

Which one do you want to use first, put the English font on the front, put the Chinese and English names on it, add quotation marks for Chinese characters, and quotes for spaces<(￣︶￣)↗

Fancy little details:

serif and San-serif represent serif and san-serif respectively

Fancy second trick: Import the fonts you downloaded locally

oh ho ho ho ho ~

Here we are going to start using @font-face that many of you don’t understand~ However, there is nothing to be afraid of, just follow me~

First of all, go to download a font you like, refer to the address:

Chinese font -http://font.chinaz.com/zhongwenziti.html

English font -http://www.1001freefonts.com/

Then download the font file to the local, the format of general font file is .ttf .otf .woff eot and < code>.svg, just find them and put them in your font folder

For example our directory structure is

├── index.html
├── css
│ └── index.css
├── font
│ └── windy.ttf

index.html

12345678

<html><head>< link rel="stylesheet" href="css/index.css"></head><body><p>today is windy.</p></body></html>< /pre>

index.css

12345678910

/*Introduce fontface first*/@font -face{ /*windy can be customized to any name*/ src:url('../font/windy.ttf');}/*then use it wherever you want*/p{ /*use it Just now we named windy*/ font-size:16px;/*Then just set some other things normally*/}

Then it will be wide~

Don't go~ There are 233333 below

People eating melons 1: I want to create an icon for the mobile version of Baidu, but I can’t find any censored elements...

Melon-eating crowd 2: The icons of many other sites are also the same, and I have not found where the picture files are...

Melon eater 3: You guys, too young!

The following is the monologue of No. 3 people eating melons, which has nothing to do with the author

Melon eater 3: Do you know iconfont?

People who eat melons: I don't know...

People who eat melons three: I don’t know, so hurry up and watch it

(So everyone hurried to iconfont official website http://www.iconfont.cn/plus)

iconfont.cn is a vector icon management website launched by the UX department of Jack Ma's family, and it is also the first platform in China to promote icons in the form of Webfont.

The official font library interface (http://iconfont.cn/collections) looks like this

There are also many other public libraries that can be used

If we want to find a certain type of font icon, just enter keywords in the search box

Then a lot of watermelons appeared

At this point, if you only need the image format, just download and select the format directly.

However, if we want it to be written in html as a font icon, we must first add it to the shopping cart

Then download to local

There will be a folder containing demo.html demo.css iconfont.css and four font files

Open demo.html and there will be a written example~

In general, there are two ways to introduce iconfont into Html pages

The first:

css

@font-face {'iconfont';src : url('iconfont.eot');/*Add other compatibility by yourself*/}.iconfont{font-family:"iconfont";}

html

1	<i class="iconfont"> </i>

The second type:

css

12345678

@font-face {'iconfont';src : url('iconfont.eot');/*Add other compatibility by yourself*/}.iconfont{font-family:"iconfont";}.icon-xigua:before { content: "\e7a3"; }

html

1	<i class="icon-xigua iconfont "></i>

After blue, watermelons will appear on your page, and then add styles according to your needs~

It seems that everyone already knows about iconfont from the people who eat melons on the 3rd. In addition to iconfont, the commonly used font libraries include iconmoon and fontawesome of bootstrap, They are also easy to use

Take fontawesome as an example

First download the font library to the local

Introduce font-awesome.min.css into your page after blue, pay attention to the path

<link rel="stylesheet" href= "../css/font-awesome.min.css">/*if compatible*/<!--[if IE 7]><link rel="stylesheet" href="assets/css /font-awesome-ie7.min.css"><![endif]-->

By applying icon-large (33% larger), icon-2x, icon-3x or icon-4x Styles make icons bigger.

<p><i class=" icon-camera-retro icon-large"></i> icon-camera-retro</p><p><i class="icon-camera-retro icon-2x"></i> ; icon-camera-retro</p><p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p><p>< ;i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

The result is as shown below

Isn't it amazing? Oh ho ho ho ho ho ho ho ~~~

By the way, this theme is really endless, relying on writing fonts to support the sky... Well, mainly because of the rapid development of web technology, we can use multi-color fonts again, multi-color As the name suggests, the font is different from the ordinary monochrome icons in the past. It has more vivid and rich colors, and at the same time it is more convenient to control. It is worth trying~

First of all, open the multi-color font library of Ma Yun’s father’s iconfont, wow, as expected, money can promote high technology the most

OK, so it’s actually not very difficult to use. If you have read the second article of this series: How to use fonts in a fancy way (2), the process is basically the same

As a foodie, we choose a multi-color font library for food

Then let's sing: I have a pen, I have an apple...

Add Apple to the shopping cart, click the shopping cart in the upper right corner of the page, and download the code

Then you will get a folder with examples

Multi-color fonts mainly use the new reference method of symbol reference, so we find the demo_symbol.html file, open it to get a Apple's multi-color font citation example

The specific method of using symbol reference to generate multi-color font is as follows:

Step1: import js

Introduce iconfont.js in the folder in <head>

123	<head><script src=" iconfont.js"></script></head>

※Pay attention to the path

Step2: Introduce common CSS

12345678910111213

<head><meta charset=" utf-8"/><title>Multi-color font eating melon tutorial</title><script src="iconfont.js"></script><style type="text/css"> ;.icon {width: 1em; height: 1em;/* change icon size*/vertical-align: -0.15em;/*vertical alignment*/fill: currentColor;/*icon color*/overflow: hidden;/* Solve the overflow part */}</style></head>

tips:

The unit of width and height is not limited to em, it can be px, rem, etc.
vertical-align can be middle, baseline or value, etc.
When the default icon is adjacent to the text, the icon is lower than the baseline (0.15em) x row height x 100%
Since the icon is drawn with svg, the default color is used. If you need to change it, you can modify the fill of the path in iconfont.js
The overflow viewBox part of path and stroke will be displayed under IE, and this sentence is also included in normalize.css

Step3: Write HTML

※ Note that the class names are consistent

※In order to prevent unintentional and potentially confusing output from screen-reading devices (especially when icons are purely for decoration), we set aria-hidden="true" for these icons. In short, when When you use some screen reading software, you will not hear such strange things as I have an apple icon

After the above three steps, a multi-color icon that leads the trend of the times

It will be displayed on your page~ Hurry up and show off (zhuang) to your friends~~(≧▽≦)/~

If you like it, follow the editor~ I have a lot of originals in my stomach and can't wait to come out 233333

Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/Frontend%20editors%20original%20How%20to%20use%20fonts%20chicly%20and%20fancy.html

microsoftyahei font download