首页 > 其他分享 >如何使用CSS3 @font-face 实现个性化字体

如何使用CSS3 @font-face 实现个性化字体

时间:2023-07-18 18:23:24浏览次数:40  
标签:CSS3 font face 字体 设置 文本

如何使用CSS3 @font-face 实现个性化字体。 

在网页中,我们可以使用CSS的font-family属性来定义字体。但是,定义的字体能否在用户的电脑上正确显示,取决于用户的电脑上是否安装了该字体。我们经常看到国外的一些个人网站使用了非常漂亮的字体,而这些字体通常用户的电脑上并没有安装,所以不可能使用font-family属性。今天我们将介绍使用@font-face实现个性化字体。 

CSS3 @font-face

  说@font-face是CSS3的新特性并不准确,因为CSS2就已经支持了这一特性,并且Internet Explorer早在第5版的时候就已经支持它了,不过IE实现方式是通过自有的eot(Embeded Open Type)字体格式,其它浏览器都不支持这个格式。@font-face支持如下属性:

  font-family:设置文本的字体名称。

  font-style:设置文本样式。

  font-variant:设置文本是否大小写。

  font-weight:设置文本的粗细。

  font-stretch:设置文本是否横向的拉伸变形。

  font-size:设置文本字体大小。

  src:设置自定义字体的相对路径或者路径。

标签:CSS3,font,face,字体,设置,文本
From: https://www.cnblogs.com/akweb/p/17563807.html

相关文章

  • xlsfonts
    xlsfonts列出XServer使用的字体补充说明xlsfonts命令列出XServer使用的字体,也能使用范本样式仅列出的符合条件的字体。语法xlsfonts(选项)选项-l:除字体名称外,同时列出字体的属性;-ll:此参数的效果和指定"l"参数类似,但显示更详细的信息;-lll:此参数的效果和指定"ll"参数类......
  • Hugging Face CEO:开源 AI 与美国的价值观和利益 “极其一致”
    导读HuggingFace首席执行官ClementDelangue于日前出席美国众议院科学委员会全体成员的“人工智能:推进创新以实现国家利益”主题听证会作证,并在开场白中表示,开放科学和开源AI“对于激励和促进创新至关重要,与美国的价值观和利益极其一致。”两周前,美国参议员曾就LL......
  • css3动画之打字效果
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>速度曲线步长</title>......
  • 20个非常绚丽的HTML5/CSS3应用插件
    基于HTML5的应用现在已经非常广泛,今天我们就来向大家分享20款非常绚丽的HTML5/CSS3应用插件。希望大家喜欢并分享给你的好友们。1、HTML5视频破碎重组特效强大视觉冲击HTML5视频播放器很多,但是HTML5视频特效还是很少见的,这款HTML5视频破碎重组特效非常刺激,给人强大的视觉冲击。......
  • [Vue] 使用pdf-lib和@pdf-lib/fontkit 报错 fontkit.create is not a function
    描述:pdf-lib注册了@pdf-lib/fontkit后(pdfDoc.registerFontkit(fontkit)),内部调用了fontkit的create方法,但是这个方法不存在。我在控制台打印了下fontkit对象,发现fontkit包了一层default,即 fontkit.default.create(),所以找不到这个方法, pdf-lib使用的是 fo......
  • 一文学会TextureID渲染到Surface
    最近遇到一个需求,要求将一个GL_TEXTURE_2D类型的纹理ID写入到ImageReader生成的Surface中。其实这个需求与我之前写过的一篇文章一文学会MediaCodeC与OpenGL录制mp4视频需求比较接近,只需要对该案例源码进行一些改造即可。在正式介绍实现之前,需先明确:什么是android.view.Su......
  • Facetook Priority Wall 题解
    题目传送门一道模拟题。用一个map存储每个人的优先级因子,然后存进vector里进行排序。难点在于分辨\(X\)和\(Y\)与当前是什么操作。不过需要注意,只要出现了名字就需要输出,且我们认为与你没关系的人不加分。Code#include<bits/stdc++.h>#definelllonglong#define......
  • java.lang.IllegalStateException: No primary or single unique constructor found f
      错误:Noprimaryorsingleuniqueconstructorfoundforinterfacejava.util.List(没有为List接口找到主要的或唯一的构造函数)原因:请求的参数没有匹配上处理函数的参数  解决:为List参数添加@RequestParam注解即可 ......
  • Fontforge手写字体简明教程
    拥有自己专属的手写字体一直是DIY党的梦想,fontforge是款开源字体制作工具,虽然没有Fontcreator繁多的专业化功能,但满足字体设计的基本需求还是绰绰有余的......
  • 4. Q_ 设置_p_的_font_size_10rem_,当用户重置或拖曳浏览器窗口时,文本大小是
    Q:设置p的font-size:10rem,当用户重置或拖曳浏览器窗口时,文本大小是否会也随着变化?A:不会。rem是以html根元素中font-size的大小为基准的相对度量单位,文本的大小不会随着窗口的大小改变而改变。......