天生我才必有用

@font-face support across browsers

Posted in 技术,网站设计    作者:Ray    2011年三月4日

EOT: Internet Explorer

The EOT (Embedded Open Type) format typefaces are supported in all versions of Internet Explorer.

TTF: Safari, Opera, Chrome, and Firefox

Safari version 3.2 onwards, Opera version 10 onwards, Firefox version 3.5 onwards, and all versions of Chrome support the TTF (TrueType Format) for typefaces in @font-face.

OTF: Safari, Opera, Chrome, and Firefox

Similarly to the TrueType Format, OTF (OpenType Format) is supported by Safari version 3.2 onwards, Opera version 10 onwards, Firefox version 3.5  onwards, and all versions of Chrome support the TTF (TrueType Format) for typefaces in @font-face.

SVG: iPhone and Chrome

The SVG (Scalable Vector Graphics format) is supported by the iPhone and Chrome browsers. SVG font files are specially formatted .svg files that contain vector graphics for each glyph and character of the typeface it represents, allowing for easy scalability.

WOFF: Firefox

The WOFF (Web Open Font Format) is currently supported by Firefox, but is in the process of becoming a standard for font formats across all major browsers, including those by Opera, Microsoft, and Mozilla.

标签:
尚无评论

Google Web fonts

Posted in 网站设计    作者:Ray    2011年二月20日

在过去，每当你创建一个网站或者网络应用的时候，能够让你选择的字体总是少得可怜——Times和Arial（宋体），这两种你随便挑吧。而如果你想个性，就需要使用Adobe Flash或者嵌入图像文本。而弊端是，图像文本是不能自动被翻译成其他语言的，并且不能被搜索引擎索引。

好了，现在有了Google网页字体，可以使你在你的网页里使用几百种字体，而不用担心安全性。选择你喜欢的字体然后应用到网页，博客或网页应用，嵌入的也仅仅是一小段HTML和CSS代码。只要30秒就可以让你的网页上布满漂亮的字体，并能在主流浏览器上显示。从此你就可以摆脱Flash和图像文本。

我们通常使用的Times和Arial字体是通过引用本地已安装的字体，而网页字体确实通过浏览器请求从服务器上获取的（就好比网页上图片的读取），这便意味着你可以在用户的机器上显示任何字体。而当用户看到这些漂亮的字体取代了枯燥的Arial时会非常高兴。

这种网页字体技术的普及非常迅速。现在Google网页字体每天处理来自80万个独立网站和50万人次的请求，并且以每月30%的速度增长。

程序API:http://code.google.com/apis/webfonts/

只需加入以下代码即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <h1>Making the Web Beautiful!</h1>
  </body>
</html>
标签: ,
尚无评论

Drupal 常用模块

Posted in PHP,网站设计    作者:Ray    2009年五月17日

1. 内容编辑

1.1 BUEditor （http://drupal.org/project/bueditor）

bueditor1

1.2 Textile (http://drupal.org/project/textile)

使用自定义的标签来转换成Html文本

1.3 Wysiwyg API (http://drupal.org/project/wysiwyg)

一款所见即所得(WYSIWYG)编辑器。

1.4 FCKeditor (http://drupal.org/project/fckeditor)

另一款所见即所得的编辑器，同时也是较早被Drupal支持，所以维护和支持都不错。

标签:
尚无评论

使用jQuery创建Tooltips

Posted in Javascript,网站设计    作者:Ray    2009年四月2日

NetTuts最新教材：

Build a Better Tooltip with jQuery Awesomeness

效果如下：

initial-design

尚无评论

25个下拉菜单导航脚本

Posted in Javascript,网站设计    作者:Ray    2009年四月1日

这篇博客介绍了25个关于下拉菜单的脚本，有空学习研究一下：

http://vandelaydesign.com/blog/tools/dropdown-navigation-menus/

标签:
尚无评论

ffmpeg的安装及使用

Posted in 技术,网站设计    作者:Ray    2008年十月21日

ffmpeg是一个类似Imagemagick的工具，两者最大的区别在于:ImageMagick是转换图片，而ffmpeg主要提供视频的转换。同时两者也有一个非常相似的优点就是支持的格式很多，基本涵盖了所有流行的图片和视频格式。

不过ffmpeg有一个非常不方便之处，就是安装比较麻烦，在Linux系统中并非默认安装，特别是想在一些共享空间(Virtual Host)里使用可能非常的困难。

那 我们首先来讲如何在Windows系统里安装它，网上很多文章都洋洋洒洒写了很多，教你怎么编译这样ffmpeg。其实在Windows系统中进行 ffmpeg的编译是难得最高的，毕竟它是Linux的产物，在Windows下编译难度不言而喻。其实有很多替代方案可以使用，毕竟Internet是 个热心人的时间，通过Internet可以减少很多重复的工作。

  1. 你可以从http://sourceforge.net/project/showfiles.php?group_id=205275&package_id=248632下载已经编译好的版本。
  2. 你也可以安装ImageMagick，其中也包含了一个ffmpeg的binary执行文件。

如果想在Linux中编译，可以参考官方的说明。我们这里再介绍如何在虚拟空间(Virtual Host)中进行编译，其实编译的过程也非常的简单。可以参考DreamHost的Wiki中的一篇文章的介绍，http://wiki.dreamhost.com/index.php/FFmpeg ，按照步骤如果编译无错应该就没问题，不过国外的虚拟空间技术都比较成熟，不清楚国内的虚拟空间支持了如何。

最后讲2个ffmpeg的视频转换命令：

1.把视频转换成flv文件（这个用得最多，现在Flv基本上已经成了网络视频的标准了）

ffmpeg -i source -s 320×240 -b 700k -aspect 4:3 -y -f flv dest.flv 。

其中：

  • source：是原始文件的名字，可以是mov，mpeg，avi，wmv各类格式，ffmpeg基本都支持。
  • -s wxh: 指定视频的宽和高
  • -b : 设定视频的比特率
  • -aspect: 保持视频的比率。如4:3或者16:9
  • -y : 如果目标文件存在时，直接覆盖原有的目标文件。
  • -f : 指定转换的文件格式，这里是flv格式。（其实如果不指定文件格式，ffmpeg也会按文件的后缀名来进行转换）。
  • dest: 转换的目标文件名字，并不一定需要是flv，可以是mov，mpeg以及其他的常用格式。

2. 截取视频的某一帧保存为图片。

ffmpeg -i source -ss 00:00:06 -t 00:00:01 -r 1 -s 320×240 -f image2 -y dst.jpg

网上也提到了很多保存视频，但很难找到如何从指定的位置开始保存，很多视频的第一帧都是黑屏，所以如不指定起始位置容易造成保存了一副黑的图片。

  • -ss : 指定其实视频的时间: hh:mm:ss.xxx 其实还可以指定到毫秒级，不过看了下手册没找到怎么从指定的帧开始，不过这个可以通过换算实现。
  • -t: 指定保持时间长度，因为是图片，所以固定设为00:00:01。如需保持为gif动画，可以设定为其他值，具体实现官方文档有说明。
  • -r: 指定帧，这里指定为第一帧。
  • -s: 图片的宽和高
  • -f: 指定为图片格式
  • dst: 图片的名字。

先分享到这里，如有问题大家可以一起讨论。

标签:
3 评论

Image MIME 参考

Posted in 网站设计    作者:Ray    2008年十月17日
image/bmp bmp
image/cis-cod cod
image/gif gif
image/ief ief
image/jpeg jpe
image/jpeg jpeg
image/jpeg jpg
image/pjpeg jpeg pjpeg
image/pipeg jfif
image/png png
image/svg+xml svg
image/tiff tif
image/tiff tiff
image/x-cmu-raster ras
image/x-cmx cmx
image/x-icon ico
image/x-portable-anymap pnm
image/x-portable-bitmap pbm
image/x-portable-graymap pgm
image/x-portable-pixmap ppm
image/x-rgb rgb
image/x-xbitmap xbm
image/x-xpixmap xpm
image/x-xwindowdump xwd

资料摘录：http://www.w3schools.com/media/media_mimeref.asp

标签:
尚无评论

IBM Page Detailer

Posted in 网站设计    作者:Ray    2008年十月15日

一个类似FireBug中的功能，用来分析网站性能。个人一直觉得Firebug内嵌在Firefox中，可能即是它的优点同时也是他的缺点，使用起来很多的屏幕被Firebug占据。现在有这个工具后，就可以对网页进行独立测试了。

下载地址：http://www.alphaworks.ibm.com/tech/pagedetailer/download

使用说明：http://www.ibm.com/developerworks/cn/web/wa-lo-pagedetailer/index.html

尚无评论

使用JQuery来实现MooTools的首页菜单效果

Posted in Javascript,网站设计    作者:Ray    2008年八月26日

看到一篇用JQuery做的动画效果，现在才发现原来Flash最大对手不是Silverlight，其实是Javascript。
现在一次次看到Safari和Firefox的比拼，一次次看到最终促使js运行性能的提速的消息，不得不考虑这样的问题，实现这类简单的效果有必要使用Flash，毕竟js在下载文件大小上是绝对占有优势的。

此效果的链接地址.

标签: ,
1 评论

Imagemagick中图片大小转换全攻略

Posted in 网站设计    作者:Ray    2008年七月16日

Convert的resize子命令应该是在ImageMagick中使用较多的命令，它实现了图片任意大小的缩放，唯一需要掌握的就是如何使用它的一些参数测试设定值：

此说明文件中所用的原始文件(src.jpg)，宽度：200，高度：150

命令格式： -resize widthxheight{%} {@} {!} {<} {>} {^}

(更多…)

标签: ,
尚无评论
  1. Pages:
  2. 1
  3. 2
  4. 3
  5. 4