在html中使用特殊字体
目的：一首诗，要求从右往左读，垂直排列，类似古文
效果图：
html内容：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在html中使用特殊字体</title>
<link rel="stylesheet" href="index.css">
</head>
<style>
p{font-size: 54px;}
</style>
<body>
<div class="realistic" style="width: 1200px;height: 800px;">
<span>南歌子词二首</span>
<span> 柳枝词</span>
<p>一尺深红胜曲尘</p>
<p>天生旧物不如新</p>
<p>合欢桃核终堪恨</p>
<p>里许元来别有人</p>
<p>井底点灯深烛伊</p>
<p>共郎长行莫围棋</p>
<p>玲珑骰子安红豆</p>
<p>入骨相思知不知</p>
</div>
</body>
</html>
index.css内容：
@font-face {
font-family: 'pinghei';
src: url('pinghei.eot');
src:
url('pinghei.eot?#font-spider') format('embedded-opentype'),
url('pinghei.woff') format('woff'),
url('pinghei.ttf') format('truetype'),
url('pinghei.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'font2';
src: url('font2.eot');
src:
url('font2.eot?#font-spider') format('embedded-opentype'),
url('font2.woff') format('woff'),
url('font2.ttf') format('truetype'),
url('font2.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
p{
/*-webkit-writing-mode: vertical-rl;*/
font-family: 'pinghei';
margin: 0 0.5em;
line-height: 1.2em;
letter-spacing: 10px;
}
span{
font-family: 'font2'
}
.realistic {
-webkit-writing-mode: vertical-rl;
color: $color;
font-size: 40px;
position: absolute;
top: $top;
left: -400px;
//-webkit-filter:contrast(7);
opacity: 1/(($steps*2));
transform-origin: 900px 280px;
max-width: 1200px;
transform: scale($scale,$scale) perspective($perspective) rotateY($rotationY) rotateX($rotationX);
text-shadow: 0 0 3px transparentize($color,0.4), 0 0 1px transparentize($color,0.8);
text-align: left;
}
源文件:
http://yunpan.cn/cwkdus2HhjZKB （提取码：9a47）
在html中使用特殊字体的更多相关文章
- 在CSS中通过@font-face属性来实现网页中嵌入特殊字体。
首先获取要使用字体的三种文件格式.EOT..TTF或.OTF..SVG,确保能在主流浏览器中都能正常显示该字体..EOT,适用于Internet Explorer 4.0+.TTF或.OTF,适用于F ...
- 使用pango-Cairo列出系统中的有效字体
使用pango-Cairo列出系统中的有效字体,代码来源于gtk-app-devel-list fonts list using pango #include <glib.h> #incl ...
- 网页中导入特殊字体@font-face属性详解
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中. 语法规则 首先我们一起来看看@font-face的语法规则: @font-face { font-fami ...
- Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound
今天查看网站的源代码,发现有个glyphicons-halflings-regular.woff文件没有找到,因为我的网站使用了bootstrap的Glyphicons 字体图标,因此需要加载Glyp ...
- Oracle EBS的BIP报表中显示特殊字体
http://oracleseeker.com/2009/08/25/font_mapping_setup_for_special_character_print_in_oracle_ebs_bip/ ...
- Eclipse中项目面板字体的修改
修改eclipse安装目录中的如下文件,添加黄色标记部分,并设定自己需要的字体大小(这里是10px)即可: \eclipse\plugins\org.eclipse.ui.themes_1.1.1.v ...
- PowerDesigner修改设计图中文字的字体大小等样式
设计图中默认的字体是对英文比较合适的,中文就看不清楚了,特别不美观.但是可以通过修改“Display Preferences”适应我们的汉字. 我使用的PowerDesigner版本是15.1(测试版 ...
- web中的中文字体的英文名称
自从font-face出现以后,字体样式就不再是web开发者的难题了,但是对于移动端的中文来说,问题还是存在的,因为中文文件大小最少要3M+,即使选择性的加载某个字的字体,那也会出现不易替换的问题,所 ...
- iOS开发中涉及的字体问题
iOS中常见3种方法来控制字体,下面根据我在网上学习总结的内容发布(已完美避过所有坑,iOS8.4) 一.系统默认的设置字体方法(只对英文和数字生效的方法) 1.系统默认提供的字体主要是指UIFont ...
随机推荐
- Javascript高级编程学习笔记（35）—— DOM（1）节点
DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...
- 吴恩达机器学习笔记35-诊断偏差和方差(Diagnosing Bias vs. Variance)
当你运行一个学习算法时,如果这个算法的表现不理想,那么多半是出现两种情况:要么是偏差比较大,要么是方差比较大.换句话说,出现的情况要么是欠拟合,要么是过拟合问题.那么这两种情况,哪个和偏差有关,哪个和 ...
- Java高阶回调,回调函数的另一种玩法
工具类package com.sctek; import java.lang.reflect.Field; import android.os.CountDownTimer;import androi ...
- 微信小程序入门（三）
11.开发框架基本介绍 四个组成部分,其它三个前面介绍过了,主要WXS: WXS:对wxml增强的一种脚本语言,可以对请求的数据进行filter或者做计算处理,帮助wxml快速构建出页面结构. 12. ...
- [译]ASP.NET Core中使用MediatR实现命令和中介者模式
作者:依乐祝 原文地址:https://www.cnblogs.com/yilezhu/p/9866068.html 在本文中,我将解释命令模式,以及如何利用基于命令模式的第三方库来实现它们,以及如何 ...
- Quartz使用记录总结
Quartz是一个任务调度框架,最近在项目中有用到,所以做个记录总结. 一.主要元素 Scheduler:调度器,控制任务的调度,将JobDetail和Trigger注册到Scheduler加以控制. ...
- 一个用于分页的page类
今天周一,趁工作轻松,自己就写了一个基于MySQl数据库的分页查询,做分页,最主要的是以下几点: 一:写sql语句:比如查询某张数据表的数据,sql语句为:select * from table li ...
- Net使用RdKafka引发异常RdKafka.Internal.LibRdKafka 的类型初始值设定项引发异常
在Net中VS2015用RdKafka组件开发消息发布和消费,引发下面的异常 RdKafka.Internal.LibRdKafka 的类型初始值设定项引发异常System.TypeInitializ ...
- mycat 从入门到放弃 (转)
http://blog.csdn.net/u013235478/article/details/53178657 1.非分片字段查询 Mycat中的路由结果是通过分片字段和分片方法来确定的.例如下 ...
- JSON数据从MongoDB迁移到MaxCompute最佳实践
数据及账号准备 首先您需要将数据上传至您的MongoDB数据库.本例中使用阿里云的云数据库 MongoDB 版,网络类型为VPC(需申请公网地址,否则无法与DataWorks默认资源组互通),测试数据 ...