<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>webfont &#8211; 悠然居</title>
	<atom:link href="https://wordpress.youran.me/tag/webfont/feed/" rel="self" type="application/rss+xml" />
	<link>https://wordpress.youran.me</link>
	<description>极客技术博客</description>
	<lastBuildDate>Tue, 22 Mar 2016 11:56:33 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.4.8</generator>
	<item>
		<title>使用webfont美化博客标题</title>
		<link>https://wordpress.youran.me/using-webfont/</link>
					<comments>https://wordpress.youran.me/using-webfont/#comments</comments>
		
		<dc:creator><![CDATA[youran]]></dc:creator>
		<pubDate>Tue, 19 Aug 2014 16:22:38 +0000</pubDate>
				<category><![CDATA[Misc]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[webfont]]></category>
		<guid isPermaLink="false">https://wordpress.youran.me/?p=499</guid>

					<description><![CDATA[博客的标题字体总是宋体，看起来很没品位？改成图片式LOGO后，修图和位置摆放很烦？这些都可以用网络字体搞定。这段时间折腾博客主题，顺手把博客的标题字体换了，看起来更大气。 国内有家提供webfont服务的网站，名叫&#8221;有字库&#8220;，可以提供数种方式，将webfont嵌入到你的网站中。正版字库数量也非常丰富，有1000多种，足够满足你的需要。实在没有的话，它还允许你自己上传字体文件，由他们作为个人使用的webfont，代为托管(也就是默认盗版咯)。另外鉴于Google在国内的连通性，如果有人敢用Google提供的webfont，我只能表示敬佩。 因为这次我只是想把博客标题和副标题字体改一下，需要改的文字是固定的，所以选用了css引用法加载字库。注意这里引用的是经过处理的字库，里面仅包括你所需要的那些字符。为什么不直接把整个字体文件包进来？那太大了，打开个页面还得下载几M的字体文件，那得加载到猴年马月。而只有几个字的字库文件，大小也就几KB，完全不是问题。 在有字库网站上选中合适的字体（可以自己构建个html文件，用Javascript引用的方式快速预览效果），然后选择第一项“CSS引用”方式，输入你需要的字符，它就会自动生成你的专用字库。然后就按照页面上提示的那样，引用相应的css文件，并且给相应元素指定font-family或者class就行了。它那个css文件链接不是普通的文件链接，而是比较智能，能够识别出你当前浏览器类型，针对性地返回相应的css style。 一般来说，到这就可以了。但是我的博客是HTTPS的，页面里加载非本站的内容HTTP内容(有字库的css文件和字库文件)，会被判定为不安全，导致出现各种恼人提示。所以还得接着折腾。下面的步骤无视了有字库的TOS，如有不适请Ctrl+W。 解决办法(真実は)只有(いつも)一个(一つ)：把字库文件下载到自己的主机里，用自己的域名来引用。 具体步骤： 一、下载字库文件 前提是你已经能够通过有字库的网站，用生成的字库正常显示。这时候用Firefox/Chrome右键打开网页源代码，点击html head部分里的css文件引用链接，类似于： 然后就能看到类似下面的内容： /* 本css可根据不同浏览器以及不同版本自动生成对应调用代码,若下载此css或woff文件然后嵌入您的网站,浏览器版本识别功能将失效,在某些浏览器版本上将无法显示效果*/ /**/ @font-face { font-family: 'STXingkai11111'; src: url('http://www.youziku.com/CSS/webfont/2014-01-01/xxxxxxxxxxx/STXingkai.woff') format('woff'); font-weight: normal; font-style: normal; } .yyyyyyyy { font-family: STXingkai11111; } 上面那个警告不管它，看到那个url了吗？那个就是字库文件了，把它拷贝到浏览器地址栏，下载下来！需要下载三种扩展名的字库文件，分别是.eot、.ttf、.woff。链接里改下扩展名即可。 下下来以后，放到博客的任意目录下。如果博客标题和副标题的字体不一样，还需要在有字库的网站上分别生成并分别下载字库文件。 二、修改css文件 &#8230;]]></description>
		
					<wfw:commentRss>https://wordpress.youran.me/using-webfont/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
	</channel>
</rss>

<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/

Object Caching 27/50 objects using Disk
Page Caching using Disk: Enhanced 
Database Caching 4/12 queries in 0.002 seconds using Disk

Served from: wordpress.youran.me @ 2026-06-29 11:41:13 by W3 Total Cache
-->