当前位置:  编程技术>WEB前端
本页文章导读:
    ▪CSS3 @font-face 和 icofont 详解      在寒假的团队集训中,大四的师兄回来然后举行的一个名叫 VTMer codejam 的活动。听说是在那个企鹅公司经常办的活动。在codejam中我参加了工作室内部OA的制作(某些原因限制还没做成)。这次.........
    ▪JavaScript图书推荐      JavaScript权威指南(第6版) David Flanagan经典权威的JavaScript工具书JavaScript高级程序设计Professional JavaScript for Web Developers  Nichbolas C. Zakas全能前端人员必读之经典,全面知识更新必备之佳作Java.........
    ▪PHP发送邮箱激活验证       第一步:php连接数据库:dbconnection.php   <?php $server = "(local)"; $_uid = "adweb"; $_pwd = "loveyou"; $_database = "addev";  function sqlsrv_connect( $server , $uid ,$pwd,$db  ){ .........

[1]CSS3 @font-face 和 icofont 详解
    来源:    发布时间: 2013-11-06

在寒假的团队集训中,大四的师兄回来然后举行的一个名叫 VTMer codejam 的活动。听说是在那个企鹅公司经常办的活动。在codejam中我参加了工作室内部OA的制作(某些原因限制还没做成)。这次OA制作中有一个霸气的设计师和经验丰富的后台,而我只是一个小前端。似乎还没说到重点,现在来了。第一眼看到设计师的稿子就觉得里面有很多非常用字体,而且有一些小图标。(这是大多数网页都会出现的情况)所以我采用了比较传统的做法,用png图片。但是png图片有兼容问题大家都清楚的,尽管说现在网上有很多的解决办法的,但是处理起来还是会让人发毛。讲到这大家也就知道我介绍的 @font-face 和 icofont 这个样东西可以处理的问题了吧?!用他们主要是为了可以在我们网页上大胆的使用各种字体,使用一些小图片变得简易。

@font-face 是CSS3的一个模块,他主要用于在网页中嵌入自己定义的Web字体。他可以向下兼容到IE4,所以各位不用当心他的兼容问题。如果你是英语大牛的话点这里,有@font-face的详细说明。

首先我们来看一下@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-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-face {
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

第一次写技术博客,不好之处多多见谅哈!!

 

本文链接


    
[2]JavaScript图书推荐
    来源:    发布时间: 2013-11-06

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选择符,以及其他技术。

本文链接


    
[3]PHP发送邮箱激活验证
    来源: 互联网  发布时间: 2013-11-06

第一步: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

    
最新技术文章:
▪css white-space:nowrap属性用法(可以强制文字不...
▪IE里button设置border:none属性无效解决方法
▪border:none与border:0使用区别
▪html清除浮动的6种方法示例
▪三个不常见的 HTML5 实用新特性简介
▪css代码优化的12个技巧
▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
▪小技巧处理div内容溢出
▪html小技巧之td,div标签里内容不换行
▪纯CSS实现鼠标放上去改变文字内容
▪li中插入img图片间有空隙的解决方案
▪CSS3中Transition属性详解以及示例分享
▪父div高度不能自适应子div高度的解决方案
▪告别AJAX实现无刷新提交表单
▪从零学CSS系列之文本属性
▪HTML 标签
▪CSS3+Js实现响应式导航条
▪CSS3实例分享之多重背景的实现(Multiple background...
▪用css截取字符的几种方法详解(css排版隐藏溢...
▪页面遮罩层,并且阻止页面body滚动。bootstrap...
▪css代码优化的12个技巧 iis7站长之家
▪详细分析css float 属性以及position:absolute 的区...
▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
▪CSS小例子(只显示下划线的文本框,像文字一...
▪可以给img元素设置背景图
▪不通过JavaScript实现的自动滚动视差效果
▪div+CSS 兼容小摘
▪CSS的inherit与auto使用分析
 


站内导航:


特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

©2012-2021,,E-mail:www_#163.com(请将#改为@)

浙ICP备11055608号-3