Badst' weblog http://badst.org 刷新是一种乐趣 Tue, 07 Feb 2012 15:33:59 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 有点失落 http://badst.org/2012/02/%e6%9c%89%e7%82%b9%e5%a4%b1%e8%90%bd/ http://badst.org/2012/02/%e6%9c%89%e7%82%b9%e5%a4%b1%e8%90%bd/#comments Wed, 01 Feb 2012 13:01:26 +0000 badst http://badst.org/?p=338 跳不出那些局限，难有突破，很少创意。

编程不行，美感也不行，无法很好的掌控色彩搭配。

大都是抄别人的东西加上自己的一点点小改动。

做不出具有视觉冲击力的东西。

经常为了1px的问题试来试去，效率底下。

基础太差，系统学习很少。

肿麽办啊？？我的目标是什么？

]]> http://badst.org/2012/02/%e6%9c%89%e7%82%b9%e5%a4%b1%e8%90%bd/feed/ 0 Warning: Cannot modify header information http://badst.org/2012/01/warning-cannot-modify-header-information/ http://badst.org/2012/01/warning-cannot-modify-header-information/#comments Tue, 31 Jan 2012 13:40:23 +0000 badst http://badst.org/?p=335 白色主题上传上来就出问题了，编辑文章的时候出现这个错误，网上搜到很多，但都没办法解。

Warning: Cannot modify header information - headers already sent by (output started at /home/badst/domains/badst.host7.meyu.net/public_html/wp-content/themes/Spring2012/functions.php:1) in/home/badst/domains/badst.host7.meyu.net/public_html/wp-includes/pluggable.php on line 866

还有在Chrome下看到<body>跑到了<head>前面。。。我已经把所有php文件转成UTF8编码了，本来本地测试一点问题都没有的。

现在后台所有动作，修改主题什么的都会出现这个错误，虽然修改的效果已经实现。烦躁中！！！

原因：是utf-8文件BOM头在作怪。我用的是Notepad++，保存为不含BOM头的文件，问题解决了。

 

]]> http://badst.org/2012/01/warning-cannot-modify-header-information/feed/ 0 code, pre, blockquote, cite的不同 http://badst.org/2012/01/code-pre-blockquote-cite/ http://badst.org/2012/01/code-pre-blockquote-cite/#comments Tue, 31 Jan 2012 13:33:31 +0000 badst http://badst.org/?p=300 每个标签都是有其特定的语义的，样式上虽然可以随意变化，但语义都是无法互相替代的。
code, pre, blockquote, cite

code
computer code text 表示小段代码，如
font-family:Verdana,Tahoma,Arial,Sans-Serif;
pre
preformatted text 表示大段代码，范围更广，并且是块状元素，可能被使用来格式化各种文本，特别是代码。使用没有需要特别注意的，主要是语义上的正确使用。在WordPress的编辑器里表示为“预格式化”。如：
.demo
	{
		font-family:'Conv_GoodDog-webfont',Sans-Serif;
		width:800px;
		margin:10px auto;
		text-align:left;
		border:1px solid #666;
		padding:10px;
	}
blockquote
常用以大段引用，如

We hold these Truths to be self-evident,
that all Men are created equal,
that they are endowed by their Creator with
certain unalienable Rights,
that among these are
Life, Liberty and the pursuit of Happiness.

—The Declaration Of Independence,
1776-07-04

cite
小段行内引用
马克思名言：From each according to his ability,
to each according to his need.。

也许我用blockquote+ul+li的方法表示代码是不合理的，但是怎么看行数呢？

]]> http://badst.org/2012/01/code-pre-blockquote-cite/feed/ 0 使用SQL语句自定义sidebar的评论样式 http://badst.org/2012/01/%e4%bd%bf%e7%94%a8sql%e8%af%ad%e5%8f%a5%e8%87%aa%e5%ae%9a%e4%b9%89sidebar%e7%9a%84%e8%af%84%e8%ae%ba%e6%a0%b7%e5%bc%8f/ http://badst.org/2012/01/%e4%bd%bf%e7%94%a8sql%e8%af%ad%e5%8f%a5%e8%87%aa%e5%ae%9a%e4%b9%89sidebar%e7%9a%84%e8%af%84%e8%ae%ba%e6%a0%b7%e5%bc%8f/#comments Tue, 31 Jan 2012 01:25:41 +0000 badst http://badst.org/?p=321 此方法仅限于不使用后台外观里的小工具拖出来的评论列表，必须自己在sidebar.php里加代码。

Code:

  1. <!-- start sidecomments-->
  2. <li>
  3. <h2>最新评论</h2>
  4. <ul class="nav-comment-content">
  5. <?php
  6. global $wpdb;
  7. $sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
  8. comment_post_ID, comment_author, comment_author_email, comment_date_gmt, comment_approved,
  9. comment_type,comment_author_url,
  10. SUBSTRING(comment_content,1,20) AS com_excerpt
  11. FROM $wpdb->comments
  12. LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
  13. $wpdb->posts.ID)
  14. WHERE comment_approved = '1' AND comment_type = '' AND
  15. post_password = '' ORDER
  16. BY comment_date_gmt DESC
  17. LIMIT 10";
  18. $comments = $wpdb->get_results($sql);
  19. $output = $pre_HTML;
  20. foreach ($comments as $comment) {
  21. $output .= "\n<li class='clearfix'>".get_avatar($comment->comment_author_email,$size='26')."\n<div>".get_comment_author_link()." : <a href=\"" . get_permalink($comment->ID)."#comment-" . $comment->comment_ID . "\" title=\"on " .$comment->post_title . " ($comment->comment_author)\">" . strip_tags($comment->com_excerpt)."</a><br />".$comment->comment_date_gmt."<div></li>";
  22. }
  23. $output .= $post_HTML;
  24. echo $output;?>
  25. </ul>
  26. </li>
  27. <!--end sidecomments-->

表示对php以及SQL几乎一窍不通，之前用过ASP，大致看懂些尝试翻译。

07. 先使用sql语句拉出需要的字段，如：comment_post_ID 是评论编号等。

10. 使评论内容的前20个字符作为评论概要。

14. 找到已经被管理员许可的评论。

15. 而且没有被加密码

16. 以评论发表日期为索引，最新的在前面

17. 最多10个

18. 定义变量$comments为sql执行的所有结果

19. 以html格式输出

20. 从$comments中循环输出每个$comment

21. 输出的样式，这里avatar头像需要用到评论者的email，冒号""里是常量代码，代码间以点号"."连接。

24. 显示

 

 

]]> http://badst.org/2012/01/%e4%bd%bf%e7%94%a8sql%e8%af%ad%e5%8f%a5%e8%87%aa%e5%ae%9a%e4%b9%89sidebar%e7%9a%84%e8%af%84%e8%ae%ba%e6%a0%b7%e5%bc%8f/feed/ 0 CSS3:使用background-size拉伸背景图片拉伸 http://badst.org/2012/01/css3-background-size/ http://badst.org/2012/01/css3-background-size/#comments Mon, 30 Jan 2012 01:30:27 +0000 badst http://badst.org/?p=304 记得刚接触电脑那会儿，就对windows的设置桌面背景特别感兴趣。

设置背景有3个选项：居中，平铺，拉伸。

居中就相当与css中background的：center no-repat

平铺是background的默认设置。

而拉伸这个功能终于在CSS3中千呼万唤始出来。

语法：background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain

说明：设置背景图片大小，指定背景图片大小或百分比显示。

实例：以下这张图片，原图大小：256px * 256px

CSS:

color:black;
height: 350px;
width: 350px;
padding: 20px;
border: 10px dotted #111;
background: #80B3FF url('http://badst.org/wp-content/uploads/2012/01/256.jpg') center no-repeat;
background-size: 100%;
text-shadow: 0 -1px 1px #fff;
这里是效果图，可以看到背景图片被拉伸到这个div的高度和宽度。

参考资料：http://www.zhangxinxu.com/css3/css3-background-size.php

相关属性：background-clip | background-origin

]]> http://badst.org/2012/01/css3-background-size/feed/ 0 图片的另一种URL：Data URI scheme & Base64 http://badst.org/2012/01/%e5%9b%be%e7%89%87%e7%9a%84%e5%8f%a6%e4%b8%80%e7%a7%8durl%ef%bc%9adata-uri-scheme-base64/ http://badst.org/2012/01/%e5%9b%be%e7%89%87%e7%9a%84%e5%8f%a6%e4%b8%80%e7%a7%8durl%ef%bc%9adata-uri-scheme-base64/#comments Sun, 29 Jan 2012 02:54:59 +0000 badst http://badst.org/?p=295 在苹果的网站页面的source里看到这张图片，地址是：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6%2BR8AAAAlElEQVR42oWQQRHEIAxF10ElVAISVgo3bCABCUhYCZWAhEpAQpoD6bzJhNnDO0DyyA8fEXkppXyVCpLViDUfyqVIQN9JFMY637hrlCySFauL21E7KVWbAIGx56rnSLqc5KPXSLo3kySalPhTygFhRDtFC09EIsMeZJSGBj7Qveh3OJW89syImiH%2BIO2BOJX0XwA2%2BQEL4pAhSX4aBQAAAABJRU5ErkJggg%3D%3D

就很奇怪这是哪里的图片？远程的？本地的？在CSDN上问人才知道这个叫Data URI scheme

网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数，例如通过合并多个JS文件，合并CSS样式文件。除此之外，还有一个data URL 的密技，让我们直接把图像的内容崁入网页里面，这个密技的官方名称是 data URI scheme 。

 Data URI scheme 的语法：

<img src="data:image/png;base64,iVBOR....>

它包含一下部分：

data - 取得数据的协定名称

image/png - 数据类型名称

base64 - 数据的编码方法

iVBOR.... - 编码后的数据

: , ; - data URI scheme 指定的分隔符号

 

Base64 编码？

不知道什么是 base64 吗？简单地说它把一些 8-bit 数据翻译成标准 ASCII 字符，往上有很多免费的 base64 编码和解码的工具，你也可以用 PHP 的 base64_encode() 进行编码：

<?php echo base64_encode(file_get_contents('图片地址'));?>

比如我用这张图片

http://badst.org/wp-includes/images/external.png

编译后获得以下字符

iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAFVBMVEVmmcwzmcyZzP8AZswAZv////////9E6giVAAAAB3RSTlP///////8AGksDRgAAADhJREFUGFcly0ESAEAEA0Ei6/9P3sEcVB8kmrwFyni0bOeyyDpy9JTLEaOhQq7Ongf5FeMhHS/4AVnsAZubxDVmAAAAAElFTkSuQmCC

字符前加上：data:image/png;base64,后就获得这张图片的Data URI scheme 链接，显示效果： “  ”

因为浏览器不会缓存Data URL的图像，所以Data URL虽然节省HTTP请求，但是倘若这个图像要在网页多个地方显示的话，便会加大网页的内容，延长了下载的时间，其中一个解决办法是在一个 CSS class 中加入 data URL，在需要显示图像的区块调用这个 class，例如：

.logobg {
background: url(data:…)
}
<div class=”navigation logobg”>..
helo, hello
<div class=”footer logobg”>…

 

原文: http://sjolzy.cn/What-is-the-data-URI-scheme-and-how-to-use-the-data-URI-scheme.html

Wiki: Data URI scheme ... Base64

]]> http://badst.org/2012/01/%e5%9b%be%e7%89%87%e7%9a%84%e5%8f%a6%e4%b8%80%e7%a7%8durl%ef%bc%9adata-uri-scheme-base64/feed/ 0 2012.1 学习CSS总结和未来计划 http://badst.org/2012/01/2012-1-%e5%ad%a6%e4%b9%a0css%e6%80%bb%e7%bb%93%e5%92%8c%e6%9c%aa%e6%9d%a5%e8%ae%a1%e5%88%92/ http://badst.org/2012/01/2012-1-%e5%ad%a6%e4%b9%a0css%e6%80%bb%e7%bb%93%e5%92%8c%e6%9c%aa%e6%9d%a5%e8%ae%a1%e5%88%92/#comments Thu, 26 Jan 2012 00:58:39 +0000 badst http://badst.org/?p=119 总结

CSS3的各种效果太炫了，和几年前相比省了不知道多少功夫，一些简单的效果再也不要用图片了。

记得之前做的那个阳明的网站，一个透明效果搞到半死:(

有用的效果代码：（因标准不统一，各大浏览器有所不同，Firefox代码前加“-moz-”，Chrom/Safari代码前加“-webkit-”

border-radius

圆角效果值越大圆的半径越大。

box-shadow

盒子阴影。可同时定义很多个，在中间以逗号分开“,”详见：CSS3属性Box-shadow

text-shadow

文字阴影。详见：CSS3:文字阴影知多少

background

滑动门技术，一个图片，多个用途。通过控制背景的位置得到不同的显示结果。

CSS3里还能同时定义多个图片，以“,”分割，IE8目前都不支持这样的写法。

如果够细心，会在Google的源文件里找到这张图片。参考：[教程] 滑动门真正的魅力

父框架适应子框架的高度

这问题是学CSS+DIV的时候必须会遇到的，记得之前是在后面加clear:both，但现在流行的还是用:after

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

CSS优化

定期整理优化CSS，删除和合并不必要的代码。“对代码有洁癖的人才能写出更好的代码。”——纯引用

注意备份

进行大面积修改时一定要先做好备份，否则一旦出错，找不出来的时候追悔莫及。

 

 

未来计划

准备做个亮色调风格

参考：http://www.css3.info/

学习用，非剽窃！

口号：2012的春天~

主色调：白色，浅蓝，

主内容颜色

文字：深灰 #404040

高亮：橙色 #C60

链接：浅绿 #669517

栏位

两栏100%宽度自适应，左侧内容区宽度60em，右双侧栏 20em * 2

 

感觉自己在CSS方面的功底还可以啦，弱项是javascript和原创的design能力。需要加强学习。

]]> http://badst.org/2012/01/2012-1-%e5%ad%a6%e4%b9%a0css%e6%80%bb%e7%bb%93%e5%92%8c%e6%9c%aa%e6%9d%a5%e8%ae%a1%e5%88%92/feed/ 0 PHP环境搭建:Win7下安装配置Apache(2.2.21)+php(5.39)+Mysql(5.5.19) http://badst.org/2012/01/php%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%bawin7%e4%b8%8b%e5%ae%89%e8%a3%85%e9%85%8d%e7%bd%aeapache2-2-21php5-39mysql5-5-19/ http://badst.org/2012/01/php%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%bawin7%e4%b8%8b%e5%ae%89%e8%a3%85%e9%85%8d%e7%bd%aeapache2-2-21php5-39mysql5-5-19/#comments Wed, 25 Jan 2012 14:29:38 +0000 badst http://badst.org/?p=261 PHP环境搭建:Win7下安装配置Apache(2.2.21)+php(5.39)+Mysql(5.5.19)

步骤一：下载

PHP 5.3 (5.3.9) VC9 x86 Thread Safe

文件名：php-5.3.9-Win32-VC9-x86.msi [38.44MB]
sha1: 7c75a4c19c256b5b6d2e6dd5958402f5fd1def42

下载地址：http://windows.php.net/download/

 

MySQL Installer 5.5.19

文件名：mysql-installer-5.5.19.0.msi [209MB]

MD5: cc20bb782c76de9f1c61507e85f88cec

下载地址：http://dev.mysql.com/downloads/installer/

 

Apache 2.2.21 (released 2011-09-13)

httpd-2.2.21-win32-x86-openssl-0.9.8r.msi [5.56MB]

下载地址：http://httpd.apache.org/download.cgi

步骤二：安装

首相安装Apache服务，Network Domain,Server Name,email地址都可以随便写。

安装目录可以放在别的盘符，如H:/myweb

在完成apache服务的安装后，在游览器中输入http://localhost/，出现It’s work!字样，说明Apache服务安装成功了。

php建议安装在C:/php下，安装的时候会让你选择Web Server类型，这里选择Apache 2.2.x Module

然后是Apache Configuration Directory配置文件目录，默认目录是：C:\Program Files (x86)\Apache Software Foundation\Apache2.2\conf

Mysql的安装，安装目录可以默认。

server type（服务器类型）选择Server Machine

database usage（数据库用途）选第一个Multifunctional Database

networking options 默认，Character Set（编码）推荐UTF8通用性强

然后是service name和root账户密码。

步骤三：配置

配置php

1、打开C:/php/php.ini

找到
; On windows:
; extension_dir = "ext"
修改为

; On windows:
extension_dir = "C:/php/ext"

表示指定PHP扩展包的具体目录，以便调用相应的DLL文件。

2、由于默认PHP并不支持自动连接Mysql，需开启相应的扩展库功能，比如php_mysql.dll等，即将

extension=php_curl.dll
extension=php_gd2.dll
extension=php_mbstring.dll
extension=php_mysql.dll
extension=php_pdo_mysql.dll
extension=php_pdo_odbc.dll
extension=php_xmlrpc.dll
这些extension之前的分号(;)去除。（msi安装的貌似已经去除过了）

3、配置PHP的Session功能

在使用session功能时，我们必须配置session文件在服务器上的保存目录，否则无法使用session，我们需要在Windows 7上新建一个可读写的目录文件夹，此目录最好独立于WEB主程序目录之外，此处我在D盘根目录上建立了phpsessiontmp目录，然后在php.ini配置文件中找到
;session.save_path = "/tmp"
修改为
session.save_path = "D:/phpsessiontmp"

4、配置PHP的文件上传功能 如何编写PHP文件上传功能?
同session一样，在使用PHP文件上传功能时，我们必须要指定一个临时文件夹以完成文件上传功能，否则文件上传功能会失败，我们仍然需要在Windows 7上建立一个可读写的目录文件夹，此处我在D盘根目录上建立了phpfileuploadtmp目录，然后在php.ini配置文件中找到
;upload_tmp_dir =
修改为
upload_tmp_dir = "D:/phpfileuploadtmp"

5、修改date.timezone，否则在执行phpinfo时date部分会报错：
Warning: phpinfo() [function.phpinfo]…
我们需要将
;date.timezone =
修改为
date.timezone = Asia/Shanghai

至此在Windows 7上php的环境配置就算完成了，但是光完成这些配置是不够的，我们需要Apache支持PHP，所以还需要在Apache配置文件中完成相应的PHP配置。

配置Apache以支持PHP

1、打开 C:\Program Files (x86)\Apache Software Foundation\Apache2.2\conf\httpd.conf

找到 #LoadModule vhost_alias_module modules/mod_vhost_alias.so 在下一行添加

LoadModule php5_module "c:/php/php5apache2_2.dll"
PHPIniDir "c:/php"
AddType application/x-httpd-php .php .html .htm

2、默认Apache服务器执行WEB网站目录为Apache2.2/htdocs，所以当你的WEB主程序目录变更时，我们需要修改相应的Apache配置，即将

DocumentRoot "C:/Program Files/Apache Software Foundation/Apache2.2/htdocs"
修改为
DocumentRoot "H:/myweb"

<Directory "C:/Program Files/Apache Software Foundation/Apache2.2/htdocs">
修改为
<Directory "D:/PHPWeb">

3、最后修改具体的index文件先后顺序，由于配置了PHP功能，当然需要index.php优先执行

DirectoryIndex index.html
修改为
DirectoryIndex index.php index.html

4、重启Apache服务器
至此，在Apache服务器上PHP环境配置工作就完成了，你只需要在D:/PHPWeb目录下新建一个PHP文件，写入

  1. <?php
  2. echo phpinfo();
  3. ?>

然后在游览器中输入http://localhost，就可以看到PHP的具体配置页面了，代表在Window 7上PHP环境配置工作就算完成了。

在完成Windows 7上的PHP环境配置工作后，我们需要完成PHP环境搭建的最后一步，即支持Mysql数据库。Mysql数据库的配置在安装后就完成了，现在只要做一步测试。

把一下代码做成php文件放到你的网站目录里然后用localhost访问

  1. <?php
  2. $connect=mysql_connect("localhost","root","你的mysql密码");
  3. if(!$connect) echo "Mysql Connect Error!";
  4. else echo "恭喜你！Mysql已经可以连接！";
  5. mysql_close();
  6. ?>

如果成功的话可以看到：恭喜你！Mysql已经可以连接！

Win7下如果不能使用localhost链接mysql就只能用127.0.0.1了，需要修改C:\Windows\System32\drivers\etc下的hosts文件，将

# 127.0.0.1 localhost中的#注释去除即可。

到现在安装php环境全部完成，用MySQL Workbench 5.2 CE建一个空数据库然后装个wordpress吧！调试样式从此不用每次上传下载了终于！！

]]> http://badst.org/2012/01/php%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%bawin7%e4%b8%8b%e5%ae%89%e8%a3%85%e9%85%8d%e7%bd%aeapache2-2-21php5-39mysql5-5-19/feed/ 0 在网页中嵌入任意字体@font-face http://badst.org/2012/01/%e5%9c%a8%e7%bd%91%e9%a1%b5%e4%b8%ad%e5%b5%8c%e5%85%a5%e4%bb%bb%e6%84%8f%e5%ad%97%e4%bd%93font-face/ http://badst.org/2012/01/%e5%9c%a8%e7%bd%91%e9%a1%b5%e4%b8%ad%e5%b5%8c%e5%85%a5%e4%bb%bb%e6%84%8f%e5%ad%97%e4%bd%93font-face/#comments Tue, 24 Jan 2012 08:59:43 +0000 badst http://badst.org/?p=241 字体使用是网页设计中不可或缺的一部分。经常地，我们希望在网页中使用某一特定字体，但是该字体并非主流操作系统的内置字体，这样用户在浏览页面的 时候就有可能看不到真实的设计。美工设计师最常做的办法是把想要的文字做成图片，这样做有几个明显缺陷：1. 不可能大范围的使用该字体；2. 图片内容相对使用文字不易修改；3. 不利于网站SEO（主流搜索引擎不会将图片alt内容作为判断网页内容相关性的有效因素）。网络上有一些使用sIFR技术、或 javascript/flash hack的方法，但实现起来或繁琐，或有缺陷。下面要讲的是如何只通过CSS的@font-face属性来实现在网页中嵌入任意字体。

第一步

获取要使用字体的三种文件格式，确保能在主流浏览器中都能正常显示该字体。

  • .TTF，True Type Font 适用于Firefox 3.5、Safari、Opera
  • OTF，Open Type Font 适用于Firefox 3.5、Safari、Opera
  • .EOT，适用于Internet Explorer 4.0+
  • .SVG，适用于Chrome、IPhone
  • .WOFF，适用于Firefox 3.6 +，支持Mozilla的text-rendering属性

下面要解决的是如何获取到某种字体的这三种格式文件。一般地，我们在手头上（或在设计资源站点已经找到）有该字体的某种格式文件，最常见的 是.TTF文件，我们需要通过这种文件格式转换为其余两种文件格式。字体文件格式的转换可以通过网站Font2Web，FontsQuirrel或onlinefontconverter提供的在线字体转换服务获取。这里推荐第一个站点，它允许我们选择需要的字符生成字体文件（在服务的最后一个选 项），这样就大大缩减了字体文件的大小，使得本方案更具实用性。选择一个字体文件后自动给你生成一个包含5种格式字体，一个demo.html演示，和一个字体声明文件的font.css，速度很快。

第二步

获取到这几种格式的字体文件后，下一步要在样式表中声明该字体，并在需要的地方使用该字体。

字体声明如下：

  1. @font-face {
  2. font-family: 'Conv_GoodDog-webfont';
  3. src: url('fonts/GoodDog-webfont.eot');
  4. src: local(''),
  5. url('fonts/GoodDog-webfont.woff') format('woff'),
  6. url('fonts/GoodDog-webfont.ttf') format('truetype'),
  7. url('fonts/GoodDog-webfont.svg') format('svg');
  8. font-weight: normal;
  9. font-style: normal;}
  10. /*其中GoodDog-webfont替换为你的字体名称*/

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

  1. .demo
  2. {
  3. font-family:'Conv_GoodDog-webfont',Sans-Serif;
  4. width:800px;
  5. margin:10px auto;
  6. text-align:left;
  7. border:1px solid #666;
  8. padding:10px;
  9. }

下面是我通过上面两步做的示例,请看：@font-face Demo 演示

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>@font-face Demo</title>
  6. <link rel="stylesheet" href="fonts.css" type="text/css" charset="utf-8" />
  7. <style type="text/css">
  8. body {
  9. background-color:white;
  10. font-family:Verdana,Tahoma,Arial,Sans-Serif;
  11. color:black;
  12. font-size:12px;
  13. }
  14. .demo
  15. {
  16. font-family:'Conv_GoodDog-webfont',Sans-Serif;
  17. width:800px;
  18. margin:10px auto;
  19. text-align:left;
  20. border:1px solid #666;
  21. padding:10px;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <div class="demo" style="font-size:25px">
  27. The quick brown fox jumps over the lazy dog.
  28. </div>
  29. </body>
  30. </html>

参考阅读：

]]> http://badst.org/2012/01/%e5%9c%a8%e7%bd%91%e9%a1%b5%e4%b8%ad%e5%b5%8c%e5%85%a5%e4%bb%bb%e6%84%8f%e5%ad%97%e4%bd%93font-face/feed/ 0 检测浏览器是否支持CSS3和HTML5 http://badst.org/2012/01/%e6%a3%80%e6%b5%8b%e6%b5%8f%e8%a7%88%e5%99%a8%e6%98%af%e5%90%a6%e6%94%af%e6%8c%81css3%e5%92%8chtml5/ http://badst.org/2012/01/%e6%a3%80%e6%b5%8b%e6%b5%8f%e8%a7%88%e5%99%a8%e6%98%af%e5%90%a6%e6%94%af%e6%8c%81css3%e5%92%8chtml5/#comments Mon, 23 Jan 2012 16:21:23 +0000 badst http://badst.org/?p=235 Go this URL http://fmbip.com/]]> http://fmbip.com/

这个网站开始应该只是为了给人查自己的IP用的，看域名就知道了，现在可以通过它知道你的以下信息：

  • Browser
    你的浏览器和操作系统
  • CSS3
    CSS3的新增属性支持情况
  • HTML5
    HTML的新增标签 支持情况
  • Forms 2.0
    各种新增的input type，如：<input type="email"> ... IE9全部不支持
  • CSS3 Selectors
    CSS3新增的选择器，就像:hover, :focus, :after 这样的功能吧。:checked全不支持
  • Script
    对我来太难。。
  • IP & Location
    你的IP和所在地

今天更新了IE9，意外的发现IE9居然都还不支持text-shadow的样式，然后就想用这个网站查查，又意外的发现用IE9和Chrome的显示情况是不一样的，原来是根据你的浏览器变化的。

这个是IE9的，一片红叉叉。

 

这个是Chrome16的，全部支持！完胜IE9

但是似乎Chrome的字体平滑效果没有IE9好，难道Cleartype技术是微软独有的？

 

]]> http://badst.org/2012/01/%e6%a3%80%e6%b5%8b%e6%b5%8f%e8%a7%88%e5%99%a8%e6%98%af%e5%90%a6%e6%94%af%e6%8c%81css3%e5%92%8chtml5/feed/ 0