像这种瘦长字体的 CSS 怎么写？

你看他的font.css这个文件里，有这么一句
@font-face {
font-family: 'LeagueGothicRegular';
src: url('../fonts/leaguegothic/League_Gothic-webfont.eot');
src: local('☺'), url('../fonts/leaguegothic/League_Gothic-webfont.woff') format('woff'), url('../fonts/leaguegothic/League_Gothic-webfont.ttf') format('truetype'), url('../fonts/leaguegothic/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');
font-weight: normal;
font-style: normal;
}

这是引用webfont文件的。

你在你的html文件的header里面也引用一下他的font.css就行了。
加这么一句

span.line2{
display: block;
font-family: 'LeagueGothicRegular';
line-height: 1.1em;
}

graphic design
这样就好了，试试看，当然前提是你的电脑上必须安装了LeagueGothicRegular字体才行哦
如果没有的话去网上下载一下来安装

font-family只是定义字体，前提是计算机中需要有定义的字体。
如果没有的话需要在CSS中引用字体文件。
例如在外网获取：
@import url(http://fonts.googleapis.com/css?family=LeagueGothicRegular);
或者从本地文件获取，前提是先把字体文件放在网站文件夹中：
@font-face{font-family:'LeagueGothicRegular';
src:url(../fonts/LeagueGothicRegular.eot);
src:url(../fonts/LeagueGothicRegular.eot?#iefix) format('embedded-opentype'),url(../fonts/LeagueGothicRegular.woff2) format('woff2'),url(../fonts/LeagueGothicRegular.woff) format('woff'),url(../fonts/LeagueGothicRegular.ttf) format('truetype'),url(../fonts/LeagueGothicRegular.svg#LeagueGothicRegular) format('svg')}

结合css3中的形变为完成。

比如: p｛transform:rotate(0.80,1.50)｝
0.80指的是水平方向上是正常宽度的0.8倍，而1.5则是垂直方向上高度的1.5倍，你可以根据情况自己修改值，希望能够帮助到你。

字体是一方面.形变可以变瘦长.楼下有个哥们写了rotate那个.其实是scale
p{
font-size:50px;
transform:scale(.5,1.5);
}