自定义字体需要css的,CSS 自定义字体

移动端如何兼容UI给的字体

目录移动端如何兼容UI给的字体移动端的默认字体IOS

Android

Winphone

注意

自定义字体为什么要自定义字体

如何自定义样式

移动端的默认字体

IOS

默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

Android

默认中文字体是Droidsansfallback

默认英文和数字字体是Droid Sans

Winphone

默认中文字体是Dengxian(方正等线体)

默认英文和数字字体是Segoe

注意

以上系统均不支持“微软雅黑”

自定义字体

为什么要自定义字体

上周UI给了一个 “迷你简粗圆” 字体的套图, 但是移动端系统中并没有这个字体，因此即便我们使用 font-family 也没有办法让它显示出我们所需要的字体样式。因此，我们需要自定义样式。

如何自定义样式

得到该字体 “minijiancuyuan.ttf”

从互联网上将 “迷你简粗圆” 字体下载到本地项目中 font 目录下。

转换字体格式

www.fontconverter.org

打开该网站，并且上传 minijiancuyuan.ttf 文件，转换为 eot/woff/svg 格式，下载回本地，存放于本地项目 font 目录下

CSS 使用 @font-face 模块，创建该字体

@font-face {

font-family: 'minijiancuyuan(字体名称)';

src: url('font/minijiancuyuan.eot'); /* IE9 Compat Modes */

src: url('font/minijiancuyuan.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('font/minijiancuyuan.woff') format('woff'), /* Modern Browsers */

url('font/minijiancuyuan.ttf') format('truetype'), /* Safari, Android, iOS */

url('font/minijiancuyuan.svg#minijiancuyuan') format('svg'); /* Legacy iOS */

}

调用该字体

#demo{

font-family:'minijiancuyuan';

}

这样我们就可以使用这个字体了。

来源：https://www.cnblogs.com/riven952465/p/5992287.html

自定义字体需要css的,CSS 自定义字体相关推荐

html中css如何引用自定义字体 - 案例篇
html中css引用自定义字体,实现自定义字体样式效果(含案例) 网页中不同的字体,代码是怎么定义的?怎么引用外来字体文件? html 案例 · 代码如下: <!DOCTYPE html> ...
css中字体下划线样式,css下划线浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
【css】LCD液晶字体——自定义字体@font-face
实现效果: 实现步骤: 下载字体 .ttf https://www.dafont.com/theme.php?cat=302&text=0123456789 选择LCD,点download下载 ...
css字压,CSS自定义字体的实现，前端实现字体压缩
CSS 自定义字体移动端如何兼容UI给的字体 [toc] 移动端的默认字体 IOS 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue And ...
css中使用自定义字体和自定义字体图标
下载并安装Adobe Illustrator CC 2019简称AI 下载并安装FontLab7简称AI 软件安装包: 链接: https://pan.baidu.com/s/1C8d44Y2z4ro ...
css引入外部自定义字体
首先在css文件中写入 @font-face { font-family: '汉真广标',"SalesforceSansRegular"; src: url('../fon ...
稳扎稳打Silverlight(29) - 2.0Tip/Trick之Cookie, 自定义字体, 为程序传递参数, 自定义鼠标右键...
[索引页] [源码下载] 稳扎稳打Silverlight(29) - 2.0Tip/Trick之Cookie, 自定义字体, 为程序传递参数, 自定义鼠标右键, 程序常用配置参数作者:webabcd ...
android 怎么获取app 字体颜色,Android APP使用自定义字体实现方法
android系统内置字体 android 系统本身内置了一些字体,可以在程序中使用,并且支持在xml配置textView的时候进行修改字体的样式.支持字段为android:textStyle ,an ...
vscode 自定义字体样式_vscode md样式自定义
vscode md插件安装 ### Markdown Preview Enhanced 具体的使用可以查看官网文档. https://shd101wyy.github.io/markdown-prev ...
CSS选择器补充，CSS三大特性以及字体、文本样式。
在昨天基础上补充的三个选择器伪元素选择器使用伪元素来表示元素中的一些特殊的位置 ::after 表示元素的最后边的部分一般需要结合content这个样式一起使用, 通过conte ...

自定义字体需要css的,CSS 自定义字体

自定义字体需要css的,CSS 自定义字体相关推荐

最新文章

热门文章