@font-face语句如何嵌入中文字体

什么是@font-face

    @font-face是一种网络字体,是CSS的模块,利用CSS的@font-face属性可以在网页中嵌入任意字体。

    字体使用是网页设计中不可或缺的一部分。网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计。

   美工设计师最常做的办法是把想要的文字做成图片,这样做有几个明显缺陷:  一、不可能大范围的使用该字体;  二、图片内容相对使用文字不易修改;  三、不利于网站SEO。  网络上有一些使用sIFR技术、或javascript/flash hack的方法,但实现起来或繁琐,或有缺陷。而只有通过CSS的@font-face属性来实现在网页中嵌入字体的方法逐渐成为主流。

@font-face语句规则

主流浏览器都能很好地支持@font-face,但对于嵌入的字体文件的识别,却是各有各的喜好。

所以在写@font-face语句之前,需要获取要使用字体的四种文件格式,确保能在主流浏览器中都能正常显示该字体。

  • .TTF或.OTF,适用于Firefox 、Safari、Opera

  • .EOT,适用于Internet Explorer 4.0+

  • .SVG,适用于Chrome、IPhone

  • .WOFF 知用于Chrome、Firefox

四种格式的文件准备好以后,就可以写@font-face语句了,格式如下:

@font-face 

{

  font-family: ‘fontNameRegular’;

  src: url(‘fontName.eot’);

  src: local(‘fontName Regular’),

  local(‘fontName’),

  url(‘fontName.woff’) format(‘woff’),

  url(‘fontName.ttf’) format(‘truetype’),

  url(‘fontName.svg#fontName’) format(‘svg’);

}

在页面中需要的地方使用该字体:

p { font: 13px fontNameRegular, Arial, sans-serif; } 或

h1{font-family: fontNameRegular}

@font-face实现-英文

   英文字体实现@font-face的方法比较成熟,有时候看老外的个人技术博客,经常能遇到。做法相对中文简单很多,我们在手头上(或在设计资源站点已经找到)有该字体的某种格式文件,最常见的是.TTF文件,我们需要通过这种文件格式转换为其余三种文件格式。字体文件格式的转换可以通过网站FontsQuirrel或codeandmore提供的在线字体转换服务获取。

@font-face实现-中文

    @font-face是老外发明的,所以他们从来没想过中文的情况,中文一套字体一般要3-6M这样的庞然大物嵌入网页上,结果可想而知,在页面加载完成前已经被关掉了。

    当然,不是说中文就无法通过@font-face实现嵌入,但需要再麻烦一步:按需截取(根据文章所涉及到的文字生成小字库),如此便能最大程度地节约流量,将字体减到最小。

    可以在网上下载fontcreator用Unicode码来找到需要的字,保留需要的字其他的全删掉。

确实麻烦。有没有更快一点的方法?有的!!!

英文比较专业的有 TypeKit.com和fontdeck.com

中文比较专业的有 youziku.com(有字库)

中文的用起来还是比英文的麻烦,英文的直接引用就可以了,整套字体被嵌入网页速度也不受影响(一般英文一般一百多K),中文的无论如何都要先截取一下的。

    不过好在”有字库”网站功能还挺人性化,所有浏览器支持的格式(.EOT.TTF.WOFF.SVG)都自动为你生成好,你只需要提交你需要的字就可以了。甚至还有一种js方式,只需要引用一段js代码,不需要提交文字就能自动根据文章生成小字库了。非常方便。如果你想用中文@font-face那我推荐”有字库”。

不可滥用@font-face

  凡事讲究度,网页上的美化小技巧,就像做菜放的调味料,放一点美味,放多了就反胃了。

  @font-face也是如此,如果在页面上大面积应用,页面体验反而会下降

Advertisements
@font-face语句如何嵌入中文字体

Using Fancy Fonts

One of the most common reasons to edit the styles in a template is to change an
element’s font. In fact, it’s often the case that all you need to do to turn a popular
theme into something uniquely yours is to change some of the typefaces.
Originally, HTML pages were limited to a set of web-safe fonts. These are the typefaces
every web surfer has seen, including stalwarts like Times New Roman, Arial,
and Verdana. But web design has taken great strides forward in recent years with a
CSS feature called embedded fonts. Essentially, embedded fonts let you use almost
any typeface you want on your web pages—you just need to upload the font to your
web server in the right format.
The embedded fonts feature has a few quirks. First, it doesn’t work with older browsers,
so you need to make sure your pages look respectable even if your visitor’s
browser can’t load the embedded fonts. Second, although every modern browser
supports embedded fonts, they don’t all understand the same font files. For that
reason, web designers often have to upload several copies of the fonts they want to
use, each one in a different format. And, third, the CSS rule you write to use embedded
fonts is a bit convoluted, which can make for a few unnecessary headaches.
Happily, you can sidestep all these problems by using a web font service like Google
Web Fonts. There, you can pick from a huge gallery of attractive typefaces. When you
find a font you want, Google spits out the CSS style rule for you. Best of all, Google
hosts the font files on its high-powered web servers, in all the required formats, so
you don’t need to upload anything to your site.

TIP If you want to learn everything there is to know about web fonts, including how to host them on your
website, write the CSS rules yourself, and web-ify your own fonts, check out HTML5: The Missing Manual (O’Reilly),
which has a section all about embedded fonts.

注:中文嵌入字体有中国公司提供。Google 在中国行不通。

To use a Google font on a WordPress site, follow these steps:
1. Go to http://www.google.com/fonts.
Google displays a long list of fonts (Figure 13-11). At the time of this writing,
there were well over 500 typefaces to choose from.
2. When you see a font you like, click the “Pop out” button to take a closer look.
Google opens a font preview page that shows the font at different sizes.

3. If you like the font, click the “Quick use” button.
Google shows you a page with information on how to use the font. It consists
of a style sheet link (which you must add to your web page) and an example of
a style sheet rule that uses the font.
TIP Google also lets you choose your favorite fonts from its site and put them in a personalized collection. If
you do, Google gives you a few added features, like the ability to download a copy of the font to install on your
computer for print work. Google also remembers the fonts you store in your collection when you return to the
Google Web Fonts site.
4. Scroll down the page until you find the blue set of tabs with the caption “Add
this code your website” (Figure 13-12). Click the @import tab.
Google has created a ready-made style sheet for every font on its site. To use
the font, you need to link that style sheet to your web page, or import Google’s
style sheet into your style sheet (that’s the style.css file in the child theme). With
WordPress, the second approach is easier.

5. Copy the @import line and then paste it into your style.css file.
Put it right after the @import line for the standard Twenty Twelve styles.
TIP If you use several embedded fonts, you can add more than one @import command. However, there’s
a slightly more efficient approach—if you create a font collection, Google gives you a single @import line that
grants you use of all the fonts you picked.
6. Create a style that uses the font.
Once you import the Google style sheet, you can use your new font, by name,
wherever you want. Just set the font-family property, as you would with a normal
web-safe font. But remember to add a true web-safe font name after it as
a fallback, in case you’re dealing with an old-school browser that can’t display
embedded fonts or can’t download the font file.

Here’s a complete style.css file that uses this technique. The newly added parts
are highlighted in bold.

/*
Theme Name: Twenty Twelve Reboot
Description: This is a customized version of the Twenty Twelve Theme for the
Magic Tea House.
Author: Katya Greenview
Template: twentytwelve
*/
@import url(“../twentytwelve/style.css”);
@import url(http://fonts.googleapis.com/css?family=Bonbon);
.entry-header .entry-title {
font-family: ‘Bonbon’, ‘Times New Roman’;
font-size: 30px;
}

Using Fancy Fonts

Puzzling Out the Styles in a Theme

Half the battle in editing style.css is figuring out how to write your selector. Often,
you won’t know the class or ID name of the page element you want to change, so
you need to do a bit of detective work.
The best starting point is to scour the HTML that WordPress creates for your page.
You can do this in any browser by visiting the page, right-clicking it, and choosing
a command with a name like “View Source.” This shows you the complete HTML
markup, and you need to search for the piece of content you want to change. To get
started, hit Ctrl+F (Command+F on Macs), and type in a bit of the text that’s near
the part of the page you want to change. For example, to change the comments
section, you might search for “Leave a Reply” to jump to the heading that starts off
the section. Many browsers make this process easier with a feature for homing in
on the HTML in a specific part of a page (Figure 13-10).
Once you find the right place—roughly—the real hunt begins. Look at the elements
just before your content, and check the class and id attributes for names you recognize,
or that seem obvious. Pay special attention to the <div> element, which
HTML pages use to group blocks of content, like sidebars, posts, menus, headers,
and footers. You’ll often find one <div> nested inside another, which lets the theme
apply a layered tapestry of style settings (which is great for flexibility, but not so
good when you’re trying to understand exactly what rule is responsible for a specific
formatting detail).

Once you have a potential class or ID name, it’s time to experiment. Pop open the
theme editor and add a new style rule that targets the section you identified. Do
something obvious first, like changing the background color with the backgroundcolor
property. That way, you can check your site and immediately determine if you
found the right element.

STYLE SELECTOR CORRESPONDS TO…
.site-header

The header section at the top of every page;
it includes the site title, site description,
navigation menu, and header image.

.site-header img

Just the header image. Use this class to
change the header’s size or position.

.site-title

The site title in the header (for example,
“Magic Tea House”).

.site-description

The byline that appears under the site title in
the header (for example, “Tea Emporium and
Small Concert Venue”).

.site

All the content in the page, including the
header and footer. The style for this class
sets the maximum width of the site layout
(currently, that’s 960 pixels).

.widget-area

The right sidebar that holds all the widgets.
The style for this class allocates 26 percent
of the available width to the sidebar, and the
content area gets the remaining space.

.front-widgets

The bottom sidebar on the front page, when
you use the Front Page template

.widget Any widget in a widget area.
.widget-title

The optional title that appears above a
widget.

.nav-menu

The navigation menu at the top of each
page.

.nav-menu li An individual entry in the navigation menu.
.colophon

The footer area on every page, starting with
the solid horizontal line that separates the
footer from the main content area

.entry-title

The title of any post. Post titles appear in
several places (including the home page, the
single-post page, and the search page). You
probably don’t want to format titles all the
same way, so you need to combine a class
name with another selector, as shown in the
next three examples

.blog .entry-title The title of any post in the main list of posts.
.single .entry-title The title of any post on a single-post page.
.template-front-page .entry-title The title of any post on a showcase page.
.entry-content

The content in the post. As with the entrytitle
class, this applies to the post content no
matter where it appears, unless you combine
this selector with another one.

.entry-meta

The information about the post, which
appears before it (for example, “Posted on
January 14, 2014” and after it (“This entry
was posted in News by Katya Greenview on
March 16, 2014.”)

.comments-area The comments area after a post.
.comment-meta

The byline for a comment, such as “Salah on
April 26, 2014 at 11:00 pm said:”

.comment-content The comment text, after the byline.
.commentlist li.bypostauthor

A comment left by you (the author of the
post).

.commentlist li.byuser A comment left by someone other than you.
.logged-in

A class added if the current visitor is logged
in as a website user (page 370). For example,
you can use the selector .logged-in body to
change the formatting of the <body> element
for people you know.

Puzzling Out the Styles in a Theme