网页中使用任意字体之实际操作
2011-04-22 00:44
309 查看
之前对“在网页中嵌入非系统自带字体”做过一点研究,虽然技术上能实现,但是对国内来说,没有太大的实际意义,因为一个中文体文件起码20M+,而且各个浏览器支持的字体文件还都不一样,也就是说,在服务器端必须有2-3个不同格式的字体文件,用来应付各个浏览器,可以看下下面这张对应图。
以为之前做的这个小研究对以后的工作不会用到,谁知还真的用到了。有个客户要求显示时间,但时间的字体必须是电子表的那种字体,如图:
首先,我们要找到这个字体,因为这个字体只有ttf格式的,所以我们需要转换出其他各种不同的格式,至于如何转换,有软件,有在线,我在这就不指明一定要使用哪种了。
转换好后,就可以编写css代码了
至于调用,和常规的一样,在需要的地方定义font-family,并且字体名称就是刚才命名好的名称就行:
然后就看效果吧。
// var t0=new Date();
nyear=t0.getFullYear();
nmonth=t0.getMonth();
nday=t0.getDate();
nwday=t0.getDay();
nhrs=t0.getHours();
nmin=t0.getMinutes();
nsec=t0.getSeconds();
s=document.URL;pos=s.indexOf("#");
fstyle=decodeURI(s.substring(pos+1,s.length));
var hzWeek = new Array("日", "一", "二", "三", "四", "五", "六", "日");
nextday = false;
function cweekday(wday) {
return hzWeek[wday];
}
function shapetime(vhrs, vmin, vsec) {
if (vsec <= 9) vsec = "0" + vsec;
if (vmin <= 9) vmin = "0" + vmin;
if (vhrs < 0) vhrs = vhrs - vhrs - vhrs;
if (vhrs <= 9 && vhrs >= 0) vhrs = "0" + vhrs;
return vhrs + ":" + vmin + ":" + vsec
}
last0 = t0;
function NewTick() {
noww = new Date();
t1 = noww.getTime();
if (t1 < last0 || ((t1 - last0) > 45000 && last0 != t0)) {
t1 = last0 + 500;
}
last0 = t1;
noww.setTime(t1 + dectime);
if (noww.getDate() != nday) {
nyear = noww.getFullYear();
nmonth = noww.getMonth() + 1;
nwday = noww.getDay();
nday = noww.getDate();
nextday = true;
}
nhrs = noww.getHours();
nmin = noww.getMinutes();
nsec = noww.getSeconds();
}
function gettimestr() {
return nyear + '年' + nmonth + '月' + nday + '日' + '星期' + cweekday(nwday) + "
" + shapetime(nhrs, nmin, nsec);
}
dectime = new Date(nyear, nmonth - 1, nday, nhrs, nmin, nsec).getTime() - t0;
// ]]>
// function Draw(){
NewTick();
s=nyear+'年'+(nmonth+1)+'月'+nday+'日 '+'星期'+cweekday(nwday)+' ';
document.getElementById("c").innerHTML=s+shapetime(nhrs,nmin,nsec);
document.getElementById("yg").innerHTML="英国 "+shapetime(nhrs-6,nmin,nsec);
document.getElementById("mg").innerHTML="美国 "+shapetime(nhrs-13,nmin,nsec);
document.getElementById("rb").innerHTML="日本 "+shapetime(nhrs+1,nmin,nsec);
document.getElementById("ad").innerHTML="澳大利亚 "+shapetime(nhrs+3,nmin,nsec);
setTimeout("Draw()",500);
}
Draw();
// ]]>
完整demo下载。
文章中很多内容我都没有具体解释原因,因为网上对“网页中使用任意字体”的资料很多,只是例子较少,如果大家有不明白的,去百度谷歌一下,就能明了。
附1:新增两个在线字体转换的网站,FontsQuirrel、onlinefontconverter。
以为之前做的这个小研究对以后的工作不会用到,谁知还真的用到了。有个客户要求显示时间,但时间的字体必须是电子表的那种字体,如图:
首先,我们要找到这个字体,因为这个字体只有ttf格式的,所以我们需要转换出其他各种不同的格式,至于如何转换,有软件,有在线,我在这就不指明一定要使用哪种了。
转换好后,就可以编写css代码了
@font-face { font-family: 'hooray'; /*给自定义字体命名*/ src: url('hooray.eot'); src: url('hooray.eot?#iefix') format('eot'), url('hooray.woff') format('woff'), url('hooray.ttf') format('truetype'), url('hooray.svg#webfontjKg17VrE') format('svg'); }
至于调用,和常规的一样,在需要的地方定义font-family,并且字体名称就是刚才命名好的名称就行:
font-family: 'hooray';
然后就看效果吧。
// var t0=new Date();
nyear=t0.getFullYear();
nmonth=t0.getMonth();
nday=t0.getDate();
nwday=t0.getDay();
nhrs=t0.getHours();
nmin=t0.getMinutes();
nsec=t0.getSeconds();
s=document.URL;pos=s.indexOf("#");
fstyle=decodeURI(s.substring(pos+1,s.length));
var hzWeek = new Array("日", "一", "二", "三", "四", "五", "六", "日");
nextday = false;
function cweekday(wday) {
return hzWeek[wday];
}
function shapetime(vhrs, vmin, vsec) {
if (vsec <= 9) vsec = "0" + vsec;
if (vmin <= 9) vmin = "0" + vmin;
if (vhrs < 0) vhrs = vhrs - vhrs - vhrs;
if (vhrs <= 9 && vhrs >= 0) vhrs = "0" + vhrs;
return vhrs + ":" + vmin + ":" + vsec
}
last0 = t0;
function NewTick() {
noww = new Date();
t1 = noww.getTime();
if (t1 < last0 || ((t1 - last0) > 45000 && last0 != t0)) {
t1 = last0 + 500;
}
last0 = t1;
noww.setTime(t1 + dectime);
if (noww.getDate() != nday) {
nyear = noww.getFullYear();
nmonth = noww.getMonth() + 1;
nwday = noww.getDay();
nday = noww.getDate();
nextday = true;
}
nhrs = noww.getHours();
nmin = noww.getMinutes();
nsec = noww.getSeconds();
}
function gettimestr() {
return nyear + '年' + nmonth + '月' + nday + '日' + '星期' + cweekday(nwday) + "
" + shapetime(nhrs, nmin, nsec);
}
dectime = new Date(nyear, nmonth - 1, nday, nhrs, nmin, nsec).getTime() - t0;
// ]]>
// function Draw(){
NewTick();
s=nyear+'年'+(nmonth+1)+'月'+nday+'日 '+'星期'+cweekday(nwday)+' ';
document.getElementById("c").innerHTML=s+shapetime(nhrs,nmin,nsec);
document.getElementById("yg").innerHTML="英国 "+shapetime(nhrs-6,nmin,nsec);
document.getElementById("mg").innerHTML="美国 "+shapetime(nhrs-13,nmin,nsec);
document.getElementById("rb").innerHTML="日本 "+shapetime(nhrs+1,nmin,nsec);
document.getElementById("ad").innerHTML="澳大利亚 "+shapetime(nhrs+3,nmin,nsec);
setTimeout("Draw()",500);
}
Draw();
// ]]>
完整demo下载。
文章中很多内容我都没有具体解释原因,因为网上对“网页中使用任意字体”的资料很多,只是例子较少,如果大家有不明白的,去百度谷歌一下,就能明了。
附1:新增两个在线字体转换的网站,FontsQuirrel、onlinefontconverter。
相关文章推荐
- 使用@font-face 属性 实现在网页中嵌入任意字体
- 32个使用 Google 网页字体的优秀网站案例
- 使用Keepalived 实现高性能高可用实际操作说明
- FreeType 字体库使用 (简易的字形装载和实际应用)
- 使用 Cufon 渲染网页字体
- 使用hta在本地注入远程网页进行操作,解决hta不共享ie session和某些权限问题
- 在网页中使用个性字体
- iocfont 网页图标字体以及使用方法
- 使用chrome extend写一个操作京东网页的JavaScript脚本
- 树莓派 Learning 002 装机后的必要操作 11 解决在使用SecureCRT软件链接树莓派时,SecureCRT软件的终端中显示树莓派的中文字体乱码的问题
- 网页使用Font Awesome图标字体时,css定义 content 属性
- 网页中使用自定义中文字体的解决方法
- webBrowser操作网页找不到节点元素使用输入键盘SendKeys.send
- 如何使用fstream类在读写操作之间任意转化?
- 网页字体使用探究
- 使用JavaScrpt实现网页字体的自由选择
- 网页开发中,使用字体的版权问题
- 【译】在Asp.Net中操作PDF - iTextSharp - 使用字体
- Web字体工具整理,网页图标字体以及使用方法整理