在寒假的团队集训中,大四的师兄回来然后举行的一个名叫 VTMer codejam 的活动。听说是在那个企鹅公司经常办的活动。在codejam中我参加了工作室内部OA的制作(某些原因限制还没做成)。这次OA制作中有一个霸气的设计师和经验丰富的后台,而我只是一个小前端。似乎还没说到重点,现在来了。第一眼看到设计师的稿子就觉得里面有很多非常用字体,而且有一些小图标。(这是大多数网页都会出现的情况)所以我采用了比较传统的做法,用png图片。但是png图片有兼容问题大家都清楚的,尽管说现在网上有很多的解决办法的,但是处理起来还是会让人发毛。讲到这大家也就知道我介绍的 @font-face 和 icofont 这个样东西可以处理的问题了吧?!用他们主要是为了可以在我们网页上大胆的使用各种字体,使用一些小图片变得简易。
@font-face 是CSS3的一个模块,他主要用于在网页中嵌入自己定义的Web字体。他可以向下兼容到IE4,所以各位不用当心他的兼容问题。如果你是英语大牛的话点这里,有@font-face的详细说明。
首先我们来看一下@font-face的语法规则:
font-family:<YourWebFontName>;
src: <sourc> [<format>][,<source> [<format>]]*;
}
简单的说下各值的含义:
1、YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
2、source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;
3、format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等;
4、一些文本属性都可以在这里使用,比如:font-size;font-weight;font-style;
上面提到 @font-face 可以兼容到各主流浏览器,还有IE4+(这里就不上图了),但是其中的 “src” 属性却有点兼容问题。他的兼容性问题主要是与各主流浏览器对字体的格式的支持有关。各主流浏览器对字体格式的兼容情况如下:
一、TureTpe(.ttf)格式:
.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;
二、OpenType(.otf)格式:
.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;
三、Web Open Font Format(.woff)格式:
.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;
四、Embedded Open Type(.eot)格式:
.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;
五、SVG(.svg)格式:
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。
为了使@font-face达到更多的浏览器支持,Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:
font-family:'YourWebFontName';
src: url('/blog_article/YourWebFontName/.eot') format('eot');/*IE*/
src: url('/blog_article/YourWebFontName.woff') format('woff'), url('/blog_article/YourWebFontName.ttf') format('truetype');/*non-IE*/
}
上面的方法之涉及到了Pc 浏览器,所以为了让更多的浏览器支持,也可以写成这样:
font-family:'YourWebFontName';
src: url('/blog_article/YourWebFontName.eot'); /*IE9 Compat Modes*/
src: url('/blog_article/YourWebFontName.eot?') format('embedded-opentype'),/*IE6-IE8*/
url('/blog_article/YourWebFontName.woff') format('woff'), /*Modern Browsers*/
url('/blog_article/YourWebFontName.ttf') format('truetype'), /*Safari, Android, iOS*/
url('/blog_article/YourWebFontName.svg') format('svg'); /*Legacy*/
然后,我是不是该在这里实践一下呢?!但是我不太想哇,所以呢?我就发一个字体网站,里面有详细的使用教程,各位跟着他做就行了。http://kudakurage.com/ligature_symbols/
最后,再给大家介绍一个工具 fontsquirrel,通过他可以把我们下载下来的字体转换为我们需要的多种字体格式,然后我们只需要把所有字体放在同一个根目录下就行了(这样便于管理),当然也可以通过链接来做到。
注意:
1、如果你的项目中是英文网站,而且项目中的Logo,Tags等应用到较多的这种特殊字体效果,我建议你不要使用图片效果,而使用@font-face,但是你是中文网站,我觉得还是使用图片比较合适,因为加载英文字体和图片没有多大区别,但是你加载中文字体,那就不一样了,因为中文字体太大了,这样会影响到项目的某些性能的优化;
2、致命的错误,你在@font-face中定义时,文件路径没有载对;
3、你只定义了@font-face,但并没有应用到你的项目中的DOM元素上;
以上几点都是在平时制作中常出现的问题,希望大家能小意一些,另外我们没有办法在购买所有字体,就算你实力雄厚,那也没有办法在一台服务器主机上放置你所有项目需要的字体。因此我给大家提供几个免费字体下载的网址:Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,不然你点这里将有更多的免费字体。前面几个链接是帮助你获取一些优美的怪异的特殊字体,但下面这个工具作用更是无穷的大,他能帮你生成@font-face所需要的各种字体,这工具就是Font Squirrel。
本来今天还想把 icofont 写下的但是太晚了就不继续写了,他的使用也和字体息息相关好处也是大大的。写下他之后,我会在把他的链接发到这的。
本文部分引用:W3CPLUS
第一次写技术博客,不好之处多多见谅哈!!
本文链接
JavaScript权威指南(第6版) David Flanagan
经典权威的JavaScript工具书
JavaScript高级程序设计Professional JavaScript for Web Developers Nichbolas C. Zakas
全能前端人员必读之经典,全面知识更新必备之佳作
JavaScript编程精解 Haverbeke
如果你只想阅读一本关于javascript的图书,那么本书应该是你的首选。
JavaScript语言精粹 Good Part Douglas Crockford
作者从语法、对象、函数、继承、数组、正则表达式、方法、样式和优美的特性这9 个方面来呈现这门语言真正的精华部分,通过它们完全可以构建出优雅高效的代码。
测试驱动的JavaScript开发Test-Driven JavaScript Development (Christian Johansen)
《测试驱动的JavaScript开发》是一本完整的、基于最佳实践的JavaScript测试指南,同时又有着测试驱动开发方法所带来的质量保证。《测试驱动的JavaScript开发》涵盖了将最先进的自动化测试用于JavaScript开发环境的方方面面,带领读者走过整个开发的生命周期,从项目启动到应用程序部署。
JavaScript Patterns Stoyan Stefanov
本书将使用大量javascript编码模式和最佳实践来帮您回答该问题。如果您是一名有经验的开发人员,正在寻找与对象、函数、继承以及其他特定语言分类相关的解决方案,那么本书中的抽象方案和代码模板将是十分理想的指南,无论您正在使用javascript编写客户端、服务端抑或是桌面应用程序。
Node.JS开发指南 BYVoid
首先简要介绍node.js,然后通过各种示例讲解node.js 的基本特性,再用案例式教学的方式讲述如何用node.js 进行web 开发,接着探讨一些node.js 进阶话题,最后展示如何将一个node.js 应用部署到生产环境中。
Selenium 2 Testing Tools Beginner’s Guide 4
Maintainable JavaScript Nichbolas C. Zakas
Pro Javascript Performance –Monitoring and Visualization
http://www.stevesouders.com/
http://httparchive.org/
http://www.w3.org/2010/webperf/
http://flowingdata.com/ 关于数据统计的参考,R语言
高性能JavaScript High Performance JavaScript Nichbolas C. Zakas
如何提升各方面的性能,包括代码的加载、运行、DOM 交互、页面生存周期等。雅虎的前端工程师 Nicholas C. Zakas 和其他五位 JavaScript 专家介绍了页面代码加载的最佳方法和编程技巧,来帮助你编写更为高效和快速的代码。你还会了解到构建和部署文件到生产环境的最佳实践,以及有助于定位线上问题的工具。
高性能网站建设指南 High Performance Web Sites: Essential Knowledge for Front-End Engineers
高性能网站建设进阶指南 Even Faster Web Sites: Performance Best Practices for Web Developers
Steve Souders的两本书
javascript——你将获得忠告:理解ajax性能、编写高效的javascript、创建快速响应的应用程序、无阻塞加载脚本等。
网络——你将学到:跨域共享资源、无损压缩图片大小,以及使用块编码加快网页渲染。
浏览器——你将发现:避免或取代iframe的方法、简化css选择符,以及其他技术。
本文链接
第一步:php连接数据库:dbconnection.php
<?php
$server = "(local)";
$_uid = "adweb";
$_pwd = "loveyou";
$_database = "addev";
function sqlsrv_connect( $server , $uid ,$pwd,$db ){
$connect_id= mssql_connect($server, $uid, $pwd);
//echo $connect_id ;
if($connect_id){
if (mssql_select_db($db,$connect_id))
return $connect_id ;
else
echo mssql_get_last_message() ;
}
else
echo mssql_get_last_message() ;
}
function sqlsrv_query($SQL,$conn ) {
returnmssql_query( $SQL ,$conn ) ;
}
function sqlsrv_num_rows($n) {
return mssql_num_rows($n) ;
}
function sqlsrv_fetch_array($n) {
returnmssql_fetch_array($n);
}
//调用函数,连接数据库
$conn = sqlsrv_connect( $server , $_uid ,$_pwd,$_database ) ;
?>
第二步:邮箱类email.class.php
<?
class smtp
{
var $smtp_port;
var $time_out;
var $host_name;
var $log_file;
var $relay_host;
var $debug;
var $auth;
var $user;
var $pass;
var $sock;
function smtp($relay_host = "", $smtp_port = 25,$auth =false,$user,$pass)
{
$this->debug = FALSE;
$this->smtp_port = $smtp_port;
$this->relay_host = $relay_host;
$this->time_out = 30; //is used in fsockopen()
#
$this->auth = $auth;//auth
$this->user = $user;
$this->pass = $pass;
#
$this->host_name = "localhost"; //is used in HELOcommand
$this->log_file ="";
$this->sock = FALSE;
}
function sendmail($to, $from, $subject = "", $body = "", $mailtype,$cc = "", $bcc = "", $additional_headers = "")
{
$mail_from =$this->get_address($this->strip_comment($from));
$body = ereg_replace("(^|(\r\n))(\\.)", "\\1.\\3", $body);
$header .= "MIME-Version:1.0\r\n";
if($mailtype=="HTML"){
$header .= "Content-Type:text/html\r\n";
}
$header .= "To: ".$to."\r\n";
if ($cc != "") {
$header .= "Cc: ".$cc."\r\n";
}
$header .= "From:$from<".$from.">\r\n";
$header .= "Subject: ".$subject."\r\n";
$header .= $additional_headers;
$header .= "Date: ".date("r")."\r\n";
$header .= "X-Mailer:By Redhat (PHP/".phpversion().")\r\n";
list($msec, $sec) = explode(" ", microtime());
$header .= "Message-ID: <".date("YmdHis",$sec).".".($msec*1000000).".".$mail_from.">\r\n";
$TO = explode(",", $this->strip_comment($to));
if ($cc != "") {
$TO = array_merge($TO, explode(",",$this->strip_comment($cc)));
}
if ($bcc != "") {
$TO = array_merge($TO, explode(",",$this->strip_comment($bcc)));
}
$sent = TRUE;
foreach ($TO as $rcpt_to) {
$rcpt_to = $this->get_address($rcpt_to);
if (!$this->smtp_sockopen($rcpt_to)) {
$this->log_write("Error: Cannot send email to".$rcpt_to."\n");
$sent = FALSE;
continue;
}
if($this->smtp_send($this->host_name,$mail_from, $rcpt_to, $header, $body)) {
$this->log_write("E-mail has been sent to<".$rcpt_to.">\n");
} else {
$this->log_write("Error: Cannot send email to<".$rcpt_to.">\n");
$sent = FALSE;
}
fclose($this->sock);
$this->log_write("Disconnected from remotehost\n");
}
echo "<br>";
echo $header;
return $sent;
}
function smtp_send($helo, $from, $to, $header, $body = "")
{
if (!$this->smtp_putcmd("HELO", $helo)) {
return $this->smtp_error("sending HELOcommand");
}
#auth
if($this->auth){
if (!$this->smtp_putcmd("AUTH LOGIN",base64_encode($this->user))) {
return $this->smtp_error("sending HELOcommand");
}
if (!$this->smtp_putcmd("",base64_encode($this->pass))) {
return $this->smtp_error("sending HELOcommand");
}
}
#
if (!$this->smtp_putcmd("MAIL","FROM:<".$from.">")) {
return $this->smtp_error("sending MAIL FROMcommand");
}
if (!$this->smtp_putcmd("RCPT","TO:<".$to.">")) {
return $this->smtp_error("sending RCPT TOcommand");
}
if (!$this->smtp_putcmd("DATA")) {
return $this->smtp_error("sending DATAcommand");
}
if (!$this->smtp_message($header, $body)) {
return $this->smtp_error("sending message");
}
if (!$this->smtp_eom()) {
return $this->smtp_error("sending<CR><LF>.<CR><LF>[EOM]");
}
if (!$this->smtp_putcmd("QUIT")) {
return $this->smtp_error("sending QUITcommand");
}
return TRUE;
}
function smtp_sockopen($address)
{
if ($this->relay_host == "") {
return $this->smtp_sockopen_mx($address);
} else {
return $this->smtp_sockopen_relay();
}
}
function smtp_sockopen_relay()
{
$this->log_write("Trying to".$this->relay_host.":".$this->smtp_port."\n");
$this->sock =@fsockopen($this->relay_host,$this->smtp_port, $errno, $errstr,$this->time_out);
if (!($this->sock &&$this->smtp_ok())) {
$this->log_write("Error: Cannot connenct to relayhost ".$this->relay_host."\n");
$this->log_write("Error: ".$errstr."(".$errno.")\n");
return FALSE;
}
$this->log_write("Connected to relay host".$this->relay_host."\n");
return TRUE;;
}
function smtp_sockopen_mx($address)
{
$domain = ereg_replace("^.+@([^@]+)$", "\\1", $address);
if (!@getmxrr($domain,$MXHOSTS)) {
$this->log_write("Error: Cannot resolve MX\"".$domain."\"\n");
return FALSE;
}
foreach ($MXHOSTS as $host) {
$this->log_write("Trying to".$host.":".$this->smtp_port."\n");
$this->sock = @fsockopen($host,$this->smtp_port, $errno, $errstr,$this->time_out);
if (!($this->sock &&$this->smtp_ok())) {
$this->log_write("Warning: Cannot connect to mx host".$host."\n");
$this->log_write("Error: ".$errstr."(".$errno.")\n");
continue;
}
$this->log_write("Connected to mx host".$host."\n");
return TRUE;
}
$this->log_write("Error: Cannot connect to any mxhosts (".implode(", ", $MXHOSTS).")\n");
return FALSE;
}
function smtp_message($header, $body)
{
fputs($this->sock, $header."\r\n".$body);
$this->smtp_debug(">".str_replace("\r\n", "\n"."> ",$header."\n> ".$body."\n> "));
return TRUE;
}
function smtp_eom()
{
fputs($this->sock, "\r\n.\r\n");
$this->smtp_debug(". [EOM]\n");
return $this->smtp_ok();
}
function smtp_ok()
{
$response = str_replace("\r\n", "",fgets($this->sock, 512));
$this->smtp_debug($response."\n");
if (!ereg("^[23]", $response)) {
fputs($this->sock, "QUIT\r\n");
fgets($this->sock, 512);
$this->log_write("Error: Remote host returned\"".$response."\"\n");
return FALSE;
}
return TRUE;
}
function smtp_putcmd($cmd, $arg = "")
{
if ($arg != "") {
if($cmd=="") $cmd = $arg;
else $cmd = $cmd." ".$arg;
}
fputs($this->sock, $cmd."\r\n");
$this->smtp_debug(">".$cmd."\n");
retu