@font-face 很不错

Posted on 2009年7月23日 16:56

CSS3 的 @font-face 是一大亮点,随着 Firefox 升级到了 3.5,也可以体验这个东西了。

这 @font-face 是干啥的? 简单来说,就是可以在网页中自由显示字体了~

早期的 CSS 虽然可以指定字体名称,但是前提是观看者的电脑商必须安装了这款字体才行,所以基本没啥用。

现在有了 @font-face,不再会有这个限制,可以轻松更改网页上的字体,比如本 Blog 的标题:

如果你看到的不是图片中的样子的话,那赶紧升级浏览器吧~

添加的CSS 如下:

@font-face{
  font-family: "RoughDraft";
  src: url("http://galeki.is-programmer.com/user_files/galeki/File/rough_draft.ttf");
}

h1#logo a{
  font-family: "RoughDraft", serif;
  font-size:50px;
}

前四行的 @font-face 部分就是关键,使用 font-family 给这个字体起一个名字,用 src 给出这个字体文件所在的位置,就 OK 了。

之后,就可以在 CSS 中用刚才定义的名字来引用这个字体了~

浏览器会自动下载 @font-face 里 src 中的字体,并正确显示出来,这样就可以使用漂亮的字体来设计网页了,再也不用担心别人看不到。

英文字体比较适合这样做,一款英文字体也就几十 K 的大小,中文字体就有点寒了。

顺便试试:

 

http://www.galeki.net

http://www.galeki.net

 

看不到上面的去面壁,哈哈。

以后 html 文档也会活泼很多吧~

详细一点的介绍可以看 https://developer.mozilla.org/index.php?title=En/CSS/%40font-face

更加详细的可以直接看 http://www.w3.org/TR/css3-webfonts/#font-descriptions

SyntaxHighlighter 挺不错

Posted on 2009年6月15日 07:16

原来经常在使用 Wordpress 的 blog 上看到这个 js 的代码高亮工具,效果确实不错,但是还是没有让我动心。

最近发现 SyntaxHighlighter 2.0 出来了,不仅样式比原来漂亮多了,也支持了 Theme,所以准备移植到 Chito 上来。

原来插件里的“自动代码高亮”将被移除,换成这个 SyntaxHighlighter,由于都是用 <pre> 标签来包围要高亮的代码,所以只要稍加修改就可以使用 SyntaxHighlighter 了。

编辑器中也会加入 SyntaxHighlighter 工具栏。

虽然默认支持的语言不是很多,也没法在编辑器中即时看到高亮效果,但是使用 SyntaxHighlighter 的好处就是可以获得方便的查看、拷贝代码的能力,另外也不会在文章中留下很多高亮样式的代码,便于以后将文章转换成其他格式。

RubyConf 归来

Posted on 2009年5月21日 19:05

嗯,本来依照一贯的宅男风格,是肯定懒得参与这些活动的,但是这次难得在上海,Matz 又来,前阵子又下定决心不能不喜欢的事情就不去,而且天气难得的凉快,就出发了~

一共 9 个演讲,涉及 Rails 部署经验、Rails 技巧、和 Ruby 企业开发等等,收获颇丰。不过 Matz 没讲啥。

本以为下午肯定撑不住提前闪人,最后还是兴致勃勃的听完了。

最后的提问环节,台下不少问题是关于某两个模式的优劣,某两种语言的优劣,某两种思想的优劣……嘉宾大牛们的答案是啥? 那就是该用什么用什么~

而且很高兴的知道,不少网站都是不同技术的融合体,比如页面用 Rails、全文检索用 Java、邮件用 PHP、生成 PDF 用 C,充分说明了,方式真的无所谓

又换回了 File Based Session Stroe

Posted on 2009年2月28日 11:47

早期 Rails 一直是默认用文件保存 session,原来 blog 也用这个,就是 session 文件得经常清一下。

后来换成了 session 数据库表,其实也差不多,定期得清下表。 不过有两次 session 表损坏,导致程序出错,和频繁的更新 session 表有一定的关系。

最后就是目前普遍的那种 cookie session 了,忘了 Rails 2 点几开始有这个的了,这个东西不错,没有那么多乱七八糟的事情。

不过最近大家反应 blog 出现了一些奇怪的现象,比如有的时候登录成功后,发现并没有登录上;评论点击发送后,没有发送成功,也没有错误消息;保存文章也出现了这种情况。

仔细想想,发现这些情况都是从上次升级 Chito 1.1.0 之后出现的,而在 Chito 1.1.0 中才开始用的 cookie session。本地测试也遇到两次评论发送没反应的现象,清楚下浏览器的 cookie 或者刷新下页面就好了。

具体原因不明,大致感觉是保存在浏览器 cookie 中的 session 没有发送成功,然后在服务器那边 Invalid Authenticity Token 了。

随机出现,没有规律,这个比较郁闷。

现在只好又换回了 file session,还是这个放心啊……

啥个原因捏  

Javascript 相对时间

Posted on 2008年11月30日 19:38

因为相对时间是随时变化的,所以如果在页面里面直接生成相对时间的文本,那么就没法缓存成静态文件,不过用 js 可以解决这个问题。

首先,在页面里面还是用 rails 生成一般的时间,这样即使关掉了 js,也可以显示正常的时间。并套个 span:

<span class="relative_time"><%= @post.created_at %></span>

然后就是 js 的事情了,找出这些 span,并且算出相对时间替换进去:

function show_relative_time(local){
    var times = $$('span.relative_time');
    var now = new Date();
    for(i=0;i<times.length;i++){
        var time = times[i];
        var t = new Date(time.innerHTML);
        var diff = now - t;
        time.innerHTML = relative_time_text(Math.floor(Math.abs(diff/1000/60)), local);
    }
}

其中的 relative_time_text 接收分钟为参数,返回相对时间的文本:

function relative_time_text(m, local){
    var text;
    if(!rtlang[local])
        local = 'en';

    if(m <= 1)
        text = rtlang[local]['less than a minute'];
    else if(m > 1 && m <= 45)
        text = m + rtlang[local][' minutes'];
    else if(m > 45 && m <= 90)
        text = rtlang[local]['about 1 hour'];
    else if(m > 90 && m <= 1440)
        text = Math.round(m/60) + rtlang[local][' hour'];
    else if(m > 1440 && m <= 2880)
        text = rtlang[local]['1 day'];
    else if(m > 2880 && m <= 43200)
        text = Math.round(m/1440)+ rtlang[local][' days'];
    else if(m > 43200 && m <= 86400)
        text = rtlang[local]['about 1 month'];
    else if(m > 86400 && m <= 525600)
        text = Math.round(m/43200) + rtlang[local][' months'];
    else if(m > 525600 && m <= 1051200)
        text = rtlang[local]['about 1 year'];
    else
        text = Math.round(m/525600) + rtlang[local][' years'];

    return text + rtlang[local][' ago'];
}

基本就是照着 rails 里那函数改的,rtlang 就是个 hash,保存多语言信息:

var rtlang = {'zh_CN':{}, 'en':{}};
rtlang['en']['less than a minute'] = 'less than a minute';
rtlang['en'][' minutes'] = ' minutes';
rtlang['en']['about 1 hour'] = 'about 1 hour';
rtlang['en'][' hour'] = ' hour';
rtlang['en']['1 day'] = '1 day';
rtlang['en'][' days'] = ' days';
rtlang['en']['about 1 month'] = 'about 1 month';
rtlang['en'][' months'] = ' months';
rtlang['en']['about 1 year'] = 'about 1 year';
rtlang['en'][' years'] = ' years';
rtlang['en'][' ago'] = ' ago';


rtlang['zh_CN']['less than a minute'] = '小于一分钟';
rtlang['zh_CN'][' minutes'] = ' 分钟';
rtlang['zh_CN']['about 1 hour'] = '大约 1 小时';
rtlang['zh_CN'][' hour'] = ' 小时';
rtlang['zh_CN']['1 day'] = '1 天';
rtlang['zh_CN'][' days'] = ' 天';
rtlang['zh_CN']['about 1 month'] = '大约 1 个月';
rtlang['zh_CN'][' months'] = ' 个月';
rtlang['zh_CN']['about 1 year'] = '大约 1 年';
rtlang['zh_CN'][' years'] = ' 年';
rtlang['zh_CN'][' ago'] = ' 前';

这样如果要显示中文的相对时间,那么只需在页面尾部加上:

<script type="text/javascript">
     show_relative_time("zh_CN");
</script>

就搞定了~