使用font-face改变字体即加载外部字体
作者：佚名
字体：[ ] 来源：互联网 时间：02-10 15:49:49
喜欢网页布局的朋友对font-face并不陌生吧，使其可以改变网页字体，下面有个不错的示例，大家可以参考下
代码如下: &!DOCTYPE HTML& &meta charset="UTF-8"& &head& &script src="jquery-1.8.2.min.js"&&/script& &style& #gmap,#controls { width:300 height:300 } @font-face { font-family: Lovelo-B/&定义font的名字&/ src: url('font/Lovelo Black.otf');/*把下载的字体文件引入进来&/ } @font-face { font-family: L src: url('font/Lovelo Line Bold.otf'); } @font-face { font-family: HYPED; src: url('font/HYPED_Font.otf'); } div.a { font-family: Lovelo-Black, sans- font-size:24 } div.b { font-family: Lovelo, sans- font-size:24 } div.c { font-family: HYPED, sans- font-size:24 color: } body { background-color:rgb(216, 216, 216); } &/style& &script& &/script& &/head& &body class="sapUiBody"& &div class="a"&Hello World 123456&/div& &div class="b"&Hello World 123456&/div& &div class="c"&Hello World 123456&/div& &/body&
大家感兴趣的内容
12345678910
最近更新的内容Font.js - finally a decent JavaScript object representation for fonts.
by Mike "Pomax" Kamermans -
on Twitter, Pomax on numerous IRC networks.
This library adds a Font object to the collection of predefined objects
available to you when doing JS coding for the web. You are probably already
familiar with new Image() for loading images this
object does something similar for fonts.
Font.js can be used for both remote fonts (from URL) or system fonts (by
font family name), which allows you to use the Font object as a way to
detect whether a specific system font is installed at the client, for
implementing typesetting fallbacks and failsafes.
or head over to github for
constructorvar font = new Font();
load event handlerfont.onload = function() { /* your code here */ };
error event handlerfont.onerror = function(error_message) { /* your code here */ };
name assignmentfont.fontFamily = "name goes here";
font loadingremote font: font.src = "http://your.font.location/here.ttf";
system font: font.src = font.fontF
This will kick off font loading and will make the font available on-page.
note: this "src=fontFamily" approach works for any font
that is known by name, rather than by filename, so this doesn't just cover
system fonts, but also fonts that have been loaded from @font-face outside
of Font.js, such as Google, Typekit and Font Squirrel webfonts.
DOM removaldocument.head.removeChild(font.toStyleNode());
This only applies to fonts loaded from a remote resource. System fonts do not
have an associated style node.
DOM (re)insertiondocument.head.appendChild(font.toStyleNode());
This is only required if you removed the font from the page,
as the font is added to the DOM for use on-page during font
loading already.
Font Metrics
Note that system font files cannot be inspected, so they do not have an associated font.metrics object.
Instead, font.metrics is simply the boolean value "false".
font.metrics.quadsizeThe font-indicated number of units per em
font.metrics.leadingThe font-indicated line height, in font units (this vaue is, often, useless)
font.metrics.ascentThe maximum ascent for this font, as a ratio of the fontsize
font.metrics.decentThe maximum descent for this font, as a ratio of the fontsize
font.metrics.weightclassThe font-indicated
Text Metrics
font.measureText(string, size)Compute the metrics for a particular string, with this font applied at the specific font size in pixels
font.measureText(...).widththe width of the string in pixels, using this font at the specified font size
font.measureText(...).fontsizethe specified font size
font.measureText(...).heightthe height of the string. This may differ from the font size
font.measureText(...).leadingthe actual line spacing for this font based on ten lines.
font.measureText(...).ascentthe ascent above the baseline for this string
font.measureText(...).descentthe descent below the baseline for this string
font.measureText(...).boundsAn object {xmin:&num&, ymin:&num&, xmax:&num&, ymax:&num&} indicating the string's bounding box.
We introduce a JavaScript object called Font with a property "src" that, when
set, triggers an AJAX retrieval of the font you indicated should be downloaded.
When the download is complete, rather than handing control over to the browser,
the code first examines the font file: is it a real font? Is it truetype or opentype?
And what are the encoded metrics values? Once it has determined these things
(and no errors have occurred because the font is bad), the package tells
the browser to set up a text paragraph, to be typeset with this font.
In order to verify that the text is indeed typeset with the correct font,
rather than with a fallback font, the code generates a tiny fallback font
that encodes a single character, being a character that the loaded font
contains (retrieved from the font's character map). This fallback font doesn't
actually encode the character as a letter, but as a zero-width unit, so
as long as the real font isn't quite ready for typesetting yet, the browser
will use this zero-width fallback font for the text paragraph, and its width
will be zero pixels.
The code then polls the paragraph width every 50 milliseconds, and when
it sees a real width, rather than a zero width, it knows the browser is now
done loading the font into memory and getting all the data it needs to
style text with it. When this is the case, the onload() function is called,
and whatever code you wrote for handling font.onload() will be triggered.
Font.js is compatible with all browsers that support &canvas& and
Object.defineProperty - This includes all versions of Firefox, Chrome, Opera,
IE and Safari that were 'current' (Firefox 9, Chrome 16, Opera 11.6, IE9,
Safari 5.1) at the time Font.js was released.
Font.js will not work on IE8 or below due to the lack of Object.defineProperty
- I recommend using the solution outlined in / for websites
that are not corporate intranet sites, because as a home user you have no excuse
not to have upgraded to Internet Explorer 9 yet, or simply not using Internet
Explorer if you're still using Windows XP. If you have friends or family that
still use IE8 or below: intervene.
Demonstrators for TrueType and Type2 fonts
Let's try this with the
code used:
(press button to load font and show code)
Let's also try this for a (slightly smaller) OTF font instead:
code used:
(press button to load font and show code)
Of course, if you want to use one of the older "web safe" system fonts,
you can use those too. Let's try "Verdana":
code used:
(press button to load font and show code)
Comments and feedback
If you have any questions or remarks about Font.js, feel free to
leave a comment here. If you have a bug report, please use the github
Leave a comment4433人阅读
01 Html（41）
前段时间帮朋友搭建了一个WordPress博客，由于博客主题中引用了google字体库（）中的字体，导致网站打开速度超级慢，在国内使用google提供的大多少网络服务都比较慢，建议最好不要使用。
卡在不动，最简单的方法就是把google提供的字体下载到本地直接使用，方法如下：
首先在网站源码head中找到类似下面的代码：
&link rel='stylesheet' id='twentyfourteen-lato-css' &href='///css?family=Lato%3A300%2C400%2C700%2C900%2C300italic%2C400italic%2C700italic' type='text/css' media='all' /&
打开其中的url（可能需要爬墙或者），发现全是如下这样的引用地址，我们只要将其中的字体文件下载到本地，替换其中URL，把该文件另存为font.css，上传服务器
@font-face {
font-family: 'Lato';
font-style:
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url(/static/fonts/lato/v7/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
@font-face {
font-family: 'Lato';
font-style:
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(/static/fonts/lato/v7/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
@font-face {
font-family: 'Lato';
font-style:
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(/static/fonts/lato/v7/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
在WordPress模板文件中找到functions.php
将本地URL加上并使用“//”注释掉引用google字体库部分即可。
function twentyfourteen_font_url() {
$font_url = '///wp-content/themes/twentyfourteen/fonts/fonts.css';
* Translators: If there are characters in your language that are not supported
* by Lato, translate this to 'off'. Do not translate into your own language.
// if ( 'off' !== _x( 'on', 'Lato font: on or off', 'twentyfourteen' ) ) {
// $font_url = add_query_arg( 'family', urlencode( 'Lato:300,400,700,900,300italic,400italic,700italic' ), &///css& );
return $font_
Google打不开、Gmail打不、Google Analytics打不开、Google快照打不开可参看以下文章：
如果懒得折腾，可以使用360网站卫士最新服务：前端公共库、Google公共库以及Google字体库，依托360全国CDN节点，360公共库提供的服务覆盖电信、联通、移动等主流运营商线路，您可以在自己的网页上直接通过替换Google库的url来引用这些资源，让网站访问速度瞬间提速！
(C) 原文地址:
版权所有！如转载文章，请务必注明以上引用地址,否则请勿转载!
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1956822次
积分：16281
积分：16281
排名：第664名
原创：206篇
转载：212篇
评论：143条
(2)(2)(4)(1)(3)(1)(1)(2)(1)(3)(1)(6)(5)(1)(1)(2)(1)(1)(10)(11)(4)(15)(4)(6)(4)(6)(6)(1)(3)(2)(2)(3)(4)(8)(4)(5)(3)(1)(2)(3)(4)(5)(6)(10)(1)(16)(21)(31)(10)(38)(22)(58)(14)(37)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'