JuneDeng


  • 首页

  • 关于

  • 标签

  • 分类

  • 归档

font-face

发表于 2017-05-23 | 分类于 技术

昨天要改一个很简单的需求,把网站的标题改下。
修改了html,发现字体很奇怪。
有的是设计师给的,有的不是。

本以为需要切图,查看了源码,发现字体文件只有之前标题的那几个字。
新增的字没有办法应用那个字体。

找设计师要来了他的字体文件,truetype的,解压。
上传到http://transfonter.org。
把自己需要的那几个字,也就是新的标题转为svg,woff,ttf,eot,woff2格式。
替换掉原来的font文件即可。

1
2
3
4
5
6
7
8
9
10
@font-face {
font-family: "myfont";
src: url("../font/myfont.eot"); /* IE9 */
src: url("../font/myfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("../font/myfont.woff") format("woff"), /* chrome, firefox */
url("../font/myfont.ttf") format("truetype"), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url("../font/myfont.svg#myfont") format("svg"); /* iOS 4.1- */
font-style: normal;
font-weight: normal;
}

查看为何这段代码生效:
http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/

1
2
3
4
5
6
7
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}

图片文字垂直居中

发表于 2017-05-11 | 分类于 技术

个数不定的文字内容与图片的垂直居中对齐

1
2
3
4
<div>
<span>文字们哈哈哈哈哈</span>
<img src="/images/june.jpg">
</div>

1
2
div>span{display:inline-block;width:210px;vertical-align:middle;}
div>img{vertical-align:middle;}
1…212223…32
June Deng

June Deng

make the world a better place

63 日志
2 分类
24 标签
GitHub
© 2018 June Deng
由 Hexo 强力驱动
|
主题 — NexT.Mist v5.1.4