If talking about "@ font-face" many people would have known better, right. Some may be wondering I will write another article about why another site I write a lot already. But I believe there are some of them. Were just beginning to study it Some people use it. I also want to know the source of it. This article will help ease the doubts of many. People have certainly
@ Font-face rule is?
In the past, we will use the font. Must be installed in the machine of users only use font is quite restricted. But after the @ font-face has been added in. specification of CSS3, the font used on the web, it is more versatile. (You can read more. " History of Web Typography ")
@ Font-face is a mechanism that will allow us to run a font that is not
installed on the machines of users on principle, it is simple. It will act as the "identifier" in the "font file" that we want to use it.
|
|
@ Font-face {
font-family: Helvetica;
src: url ('http://www.yourdomain.com/fonts/Helvetica.ttf');
}
body {
font-family: Helvetica;
}
|
In this example,
I was afraid that some people will no font "Helvetica" installed on the
machine I wrote "@ font-face rule" on it from now on, when elements of
any running font "Helvetica", it will. not read font file from the
user's back, but that is going to read from. "Http://www.yourdomain.com/fonts/Helvetica.ttf" we set out instead.
Some suspect If we wanted to use multiple font sharing, how to write? Let us add "@ font-face rule" into one. Always remember that if no "@ font-face rule" web browsers to find a font that the user of a tie.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
@ Font-face {
font-family: Helvetica;
src: url ('http://www.yourdomain.com/fonts/Helvetica.ttf');
}
@ Font-face {
font-family: Georgia;
src: url ('http://www.yourdomain.com/fonts/Georgia.ttf');
}
body {
font-family: Helvetica;
}
h1 {
font-family: Georgia;
}
|
Will see that the "@ font-face" is not that difficult really. But the problem is that web browsers are compatible font file format (format) is different. If all of the above example I can see that the font file extension "ttf" or "TrueType" on which font file format is widely used. And can be downloaded for free from various websites. But found that there are certain web browsers that do not support this extension font file anyway.
However, they should Will be available to all Browsers?
In the days before web browser that supports @ font-face, but Internet
Explorer only, we must choose the font file format that is compatible to
IE "eot".
|
|
@ Font-face {
font-family: Helvetica;
src: url ('Helvetica.eot');
}
|
In later times the various web browsers support @ font-face, but more compatible font file format is not the same. So we must prepare the font file in different ways and to make them available to all web browsers.
|
|
@ Font-face {
font-family: Helvetica;
src: url ('Helvetica.eot'),. url ('Helvetica.woff'),. url ('Helvetica.ttf');
}
|
To see that I have added the font file extension "woff" and "ttf" came
to a total of 3 fonts with @ font-face which allows us to use almost all
web browsers in this time.
But the above code
Try to open with IE versions less than 9 to find that @ font-face does
not work like this is because IE does not support old versions of a
multi src url arranged it.
The above example would look older IE url we write sequence is just one
url is 'Helvetica.eot'), url ('Helvetica.woff'), url ('Helvetica.ttf'
Of course, that url. This would have not found anything (404 Not Found),
we solve this problem by putting a "?" from font file extension "eot"
We still have the following code.
|
|
@ Font-face {
font-family: Helvetica;
src: url ('Helvetica.eot?'),. url ('Helvetica.woff'),. url ('Helvetica.ttf');
}
|
Adding "?" Does not help the older IE can read multiple src url arranged it.
But it helps to read the url that it has become 'Helvetica.eot?'), Url
('Helvetica.woff'), url ('Helvetica.ttf' Typically, web browsers will
see whatever is behind ". "a" query string "or parameters used in the
query itself, which it is not used to indicate the url've long made it
back just the same. 'Helvetica.eot' Only this reason putting a "?" Thus helping older IE can not find font file correctly.
The problem is to identify the font file src url to make multiple web
browsers font file to download them all though web browser that does not
support it.
The above code IE to download the font file into the format "eot",
"woff" and "ttf" But it really is just a "eot" Only font file I could
have hundreds of KB is what we need. to waste time downloading
unnecessarily.
To solve this problem, we put the "Format Hint" to that format hint
will tell web browsers such as font file is a format I do not take it,
do not download Mana (format hint support from IE9 onwards) Now web
browsers. you'll know that I should load the font file and font file
should be skipped.
|
|
@ Font-face {
font-family: Helvetica;
src: url ('Helvetica.eot?'). format ('embedded-opentype'),.
url ('Helvetica.woff') format ('woff'),.
url ('Helvetica.ttf') format ('truetype');
}
|
By this time our code is quite okay then. Available with almost all web browsers. The rest of the web browser you are using one that is not in IE9 mode. Compatibility View mode is designed to allow users to browse the web, IE9 old. Long been written better. If we want to support in this mode with IE9. We need to add another line of code into it.
|
|
@ Font-face {
font-family: Helvetica;
src: url ('Helvetica.eot');
src: url ('Helvetica.eot?'). format ('embedded-opentype'),.
url ('Helvetica.woff') format ('woff'),.
url ('Helvetica.ttf') format ('truetype');
}
|
We need to add another one to come src IE9 in Compatibility View mode to use @ font-face, some people may complain that. It will provide support for IE9 in Compatibility View mode, with no need to add another line of code at all? We solved the <meta> we add this value to the <head>.
|
|
<Meta http-equiv = "X-UA-Compatible". content = "IE = edge">.
|
The above code will not force IE9 in Compatibility View mode, you just have to put this code. We did not need to add code in @ font-face rule the line to me.
Some people think we do not assume such <meta> then choose to add
one extra line of code to support IE9 in Compatibility View mode, we
also have to put the font file extension "eot?" In src line 2 on the
other. Why not cut out to do that? I like this
|
|
@ Font-face {
font-family: Helvetica;
src: url ('Helvetica.eot');
src: url ('Helvetica.woff') format ('woff'),.
url ('Helvetica.ttf') format ('truetype');
}
|
The answer is not cut it.
The above code will see that the src first line to read font file
format "eot" If we write only one line will be available to IE since
version 9 came down here (including IE9 Mode Compatibility View, too. ),
but we need to put src second line to support web browsers, etc. With
the src second line of this is to "Override (prevail)" src line first
makes web browsers any need. font file format "eot" will not work
because the second line we have eliminated src font file format "eot"
away.
Some may wonder why I did not mention the font file in the format "SVG" I forgot to go? The answer is, I did not forget it. But I did not enter into.
@ Font-face-rule because the font file in the format "svg" is still a
bug with the display, and web browsers that support all the web browsers
older like Safari on iOS versions lower than 4 (say it is web. turn to
other modern browsers supports finished).
Another thing I did not mention is that the src is "Local" I actually
wrote @ font-face rule can be set to the font file in the local (if the
unit is installed font. that out already) so as not to waste time
downloading a font that again we can use both local and url to share it
if it can not find the font file that is local, it will fall-back on.
the font-file to specify the local url place but it has the disadvantage
that. Since we can not be sure that the font is installed on that machine. Looks match the font we want to use it or not.
Although it has the same name except that it has a problem in some web
browsers on the "Permission" due to the "reach" of users with offline
files in these reasons.
I do not recommend the use of a local src Normally, when web browser
download font that it used only one font file that will store it in the
"Cache" of it anyway. We do not have to waste time downloading the next time you use the src and url so it does not spoil much more than a local.
Define font-weight and font-style in @ font-face rule.
Many of you have already seen it. But still the question, not less. Why we should put the font-weight and font-style in @ font-face rule is not to worry about? I have no answer to it Let's take a look at the following example.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
@ Font-face {
font-family: Helvetica;
src: url ('Helvetica.eot');
src: url ('Helvetica.eot?'). format ('embedded-opentype'),.
url ('Helvetica.woff') format ('woff'),.
url ('Helvetica.ttf') format ('truetype');
}
article h1 {
font-family: Helvetica;
font-weight: bold;
}
article p {
font-family: Helvetica;
}
article em {
font-family: Helvetica;
font-style: italic;
}
|
The above code the @ font-face rule, we use the same font as the font
is "Helvetica" and look at us define h1 font-weight bold numbers to
write this.
Tells the web browser "synthesize (create)" font "Helvetica" and "bold"
and show the p we have not customized styles to the font's web browser,
thereby rendering font "Helvetica" traditional and final. em is similar
to that h1 is a web browser to synthesize font "Helvetica" and "italic"
showing up.
Causes the web browser to "synthetic" font "Helvetica" in different ways.
It is because we did not "specify" font file that looks like that in my
"@ font-face rule" because it is a font that is synthesized by the
"Algorithm" is not as sharp and perfect as the font designer. The
solution is not really designed to prepare the Helvetica font family in
different ways to complete it, as the following example.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
@ Font-face {
font-family: HelveticaRegular;
src: url ('HelveticaRegular.eot');
src: url ('HelveticaRegular.eot?'). format ('embedded-opentype'),.
url ('HelveticaRegular.woff') format ('woff'),.
url ('HelveticaRegular.ttf') format ('truetype');
}
@ Font-face {
font-family: HelveticaBold;
src: url ('HelveticaBold.eot');
src: url ('HelveticaBold.eot?'). format ('embedded-opentype'),.
url ('HelveticaBold.woff') format ('woff'),.
url ('HelveticaBold.ttf') format ('truetype');
}
@ Font-face {
font-family: HelveticaItalic;
src: url ('HelveticaItalic.eot');
src: url ('HelveticaItalic.eot?'). format ('embedded-opentype'),.
url ('HelveticaItalic.woff') format ('woff'),.
url ('HelveticaItalic.ttf') format ('truetype');
}
article h1 {
font-family: HelveticaBold;
}
article p {
font-family: HelveticaRegular;
}
article em {
font-family: HelveticaItalic;
}
|
To see that I was preparing font family Helvetica to 3 styles-including
"HelveticaRegular", "HelveticaBold" and "HelveticaItalic" to replace
the regular, bold and italic, respectively, but noticed something here
that h1 and em me. Cutting font-weight: bold and font-style: italic away
because the font "HelveticaBold" and "HelveticaItalic" look that I
like. No need to "synthetic" look it up anymore. The result is a sharper text. At first I did not like the distortion
If you will notice that the font is sharper than the original font synthesized by algorithm.
But the problem until it happens again because some web browsers is to
"synthesize" the special nature of our font automatically from the code
above. Although we did not put
font-weight: bold the h1, but web browsers are "synthetic" font
versions in bold the font of us automatically that the resulting font
"HelveticaBold" Our bold than usual (original bold) then the solution
is. Let us add font-weight: normal to it. Similarly, let us add font-style: normal to em too, to force a web browser to look like we do not want to repeat it again.
|
|
article h1 {
font-family: HelveticaBold;
font-weight: normal;
}
article p {
font-family: HelveticaRegular;
}
article em {
font-family: HelveticaItalic;
font-style: normal;
}
|
Will see that we have to keep reset the font-weight and font-style to return to normal at all, which is quite a bit cumbersome. But we have solved Let us take a look back.
What we are writing to address a font file is called "@ font-face rule"
Do not forget that it is the "Rule" or "Terms" that the principle of "@
font-face rule" is that it. font to see if it matches the rule we use
it, right? If it matches the rule we set it to "apply" rule that I see @ font-face rules, I have replaced the front side.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
@ Font-face {
font-family: Helvetica;
src: url ('HelveticaRegular.eot');
src: url ('HelveticaRegular.eot?'). format ('embedded-opentype'),.
url ('HelveticaRegular.woff') format ('woff'),.
url ('HelveticaRegular.ttf') format ('truetype');
font-weight: normal;
font-style: normal;
}
@ Font-face {
font-family: Helvetica;
src: url ('HelveticaBold.eot');
src: url ('HelveticaBold.eot?'). format ('embedded-opentype'),.
url ('HelveticaBold.woff') format ('woff'),.
url ('HelveticaBold.ttf') format ('truetype');
font-weight: bold;
font-style: normal;
}
@ Font-face {
font-family: Helvetica;
src: url ('HelveticaItalic.eot');
src: url ('HelveticaItalic.eot?'). format ('embedded-opentype'),.
url ('HelveticaItalic.woff') format ('woff'),.
url ('HelveticaItalic.ttf') format ('truetype');
font-weight: normal;
font-style: italic;
}
|
Please notice the @ font-face rules for me to find that the 3 rules I
set the font-family is "Helvetica" the same (no Regular, Bold or Italic
suffix) but will set the src of the font is different. to the
"HelveticaRegular", "HelveticaBold" and "HelveticaItalic" respectively
in each rules I set font-weight and font-style, font characteristics to
meet again, too.
จาก @font-face rule ด้านบน จะได้ว่า
เมื่อมีการเรียกใช้ font-family: Helvetica ที่ elements ใดๆ font
“HelveticaRegular” จะถูกนำมาใช้ แต่ถ้า element นั้นๆ กำหนด font-weight
เป็น bold เอาไว้ font “HelveticaBold” จะถูกนำมาใช้แทน ในทำนองเดียวกัน
font “HelveticaItalic” ก็จะถูกนำมาใช้แทน หาก element นั้นๆ ถูกกำหนด
font-style ให้เป็น italic ลองมาดูตัวอย่างการใช้งานจริงของ @font-face
rules แบบนี้กันเลยครับ
1
2
3
4
5
6
7
8
9
10
11
12
|
article {
font-family : Helvetica ;
}
article h1 {
font-weight : bold ;
}
article p {
}
article em {
font-style : italic ;
}
|
จะเห็นว่าการนำไปใช้งานจริงนั้นง่ายขึ้นกว่าเดิมเยอะเลยครับ
วิธีนี้นอกจากเขียนได้ง่ายขึ้นแล้ว ยังมีประโยชน์ในกรณีที่ web browser
ไม่สามารถโหลด font ที่ต้องการได้ด้วยเหตุผลบางประการ
การแสดงผลจะยังคงดูสมเหตุสมผล คือแสดงตัวหนาที่ h1 และตัวเอียงที่ em
ต่างจากการเขียน @font-face rules แบบเดิม ที่ต้องไปใส่ font-weight และ
font-style ให้เป็น normal ทำให้การแสดงผลที่ออกมานั้น
ผิดเพี้ยนจากที่เราตั้งใจเอาไว้
ใช้ @font-face เป็นแล้ว ทีนี้จะหา Download ได้จากที่ไหน?
หากคิดจะใช้ @font-face ต้องนึกถึงเรื่องของลิขสิทธิ์ของ font เสมอครับ
ถ้าเราต้องการจะใช้ font ที่มีลิขสิทธิ์
ให้เราปฏิบัติตามข้อกำหนดอย่างเคร่งครัด แต่ในสมัยนี้
มีหลายเว็บไซต์ที่ให้บริการดาวน์โหลด font ไปใช้ฟรีๆ อย่างเช่น
Font Squirrel นอกจากนี้ ยังมีบริการที่จะช่วยให้เราใส่ @font-face ในหน้าเว็บของเราได้ง่ายขึ้นอย่าง
Google Fonts และ
TypeKit อีกด้วยครับ
บทสรุปเกี่ยวกับการใช้ @font-face
@font-face rule ที่ทำให้ใช้ได้ในทุกๆ web browsers
|
|
@font-face {
font-family : Helvetica ;
src : url ( 'Helvetica.eot' ) ;
src : url ( 'Helvetica.eot?' ) format ( 'embedded-opentype' ) ,
url ( 'Helvetica.woff' ) format ( 'woff' ) ,
url ( 'Helvetica.ttf' ) format ( 'truetype' ) ;
}
|
ตัวอย่างการเขียน @font-face rule ในการใช้งานจริง
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
@font-face {
font-family : Helvetica ;
src : url ( 'HelveticaRegular.eot' ) ;
src : url ( 'HelveticaRegular.eot?' ) format ( 'embedded-opentype' ) ,
url ( 'HelveticaRegular.woff' ) format ( 'woff' ) ,
url ( 'HelveticaRegular.ttf' ) format ( 'truetype' ) ;
font-weight : normal ;
font-style : normal ;
}
@font-face {
font-family : Helvetica ;
src : url ( 'HelveticaBold.eot' ) ;
src : url ( 'HelveticaBold.eot?' ) format ( 'embedded-opentype' ) ,
url ( 'HelveticaBold.woff' ) format ( 'woff' ) ,
url ( 'HelveticaBold.ttf' ) format ( 'truetype' ) ;
font-weight : bold ;
font-style : normal ;
}
@font-face {
font-family : Helvetica ;
src : url ( 'HelveticaItalic.eot' ) ;
src : url ( 'HelveticaItalic.eot?' ) format ( 'embedded-opentype' ) ,
url ( 'HelveticaItalic.woff' ) format ( 'woff' ) ,
url ( 'HelveticaItalic.ttf' ) format ( 'truetype' ) ;
font-weight : normal ;
font-style : italic ;
}
|
ตัวอย่างการกำหนด styles ที่ elements ต่างๆ
1
2
3
4
5
6
7
8
9
10
11
12
|
article {
font-family : Helvetica ;
}
article h1 {
font-weight : bold ;
}
article p {
}
article em {
font-style : italic ;
}
|
No comments:
Post a Comment