首页 > 其他分享 >CSS `@font-face` & font-family All In One

CSS `@font-face` & font-family All In One

时间:2022-10-24 21:58:56浏览次数:60  
标签:layer family url import font CSS

CSS @font-face & font-family All In One

@font-face & font-family

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff")
      format("woff");
}

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

/* A font family name and a generic family name */
font-family: "Gill Sans Extrabold", sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;

/* A generic family name only */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
font-family: ui-monospace;
font-family: ui-rounded;
font-family: emoji;
font-family: math;
font-family: fangsong;

/* Global values */
font-family: inherit;
font-family: initial;
font-family: revert;
font-family: revert-layer;
font-family: unset;


https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="600" src="https://www.youtube.com/embed/bmpI252DmiI?start=289" title="YouTube video player" width="100%"></iframe>

CSS @import


@import url;
@import url list-of-media-queries;
@import url supports( supports-query );
@import url supports( supports-query ) list-of-media-queries;
@import url layer;
@import url layer( layer-name );
@import url layer( layer-name ) list-of-media-queries;
@import url layer( layer-name ) supports( supports-query ) list-of-media-queries;


https://developer.mozilla.org/en-US/docs/Web/CSS/@import

https://www.w3schools.com/cssref/pr_import_rule.php

cnblogs comments bug???

css @import*

refs

vue components @import css bug All In One

https://www.cnblogs.com/xgqfrms/p/9927590.html



©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!

原创文章,版权所有©️xgqfrms, 禁止转载

标签:layer,family,url,import,font,CSS
From: https://www.cnblogs.com/xgqfrms/p/16823126.html

相关文章

  • css-常用布局-圣杯
    双飞翼布局body<body><divclass="header">header</div><divclass="container"><divclass="middle">middle</div><divclass="left">lef......
  • CSS定位布局
    CSS定位布局static静态定位,也是position的默认值relative.box2{position:relative;Left:15px;top:15px;}相对定位,但是元素所占空间仍在原位absoluteposi......
  • css边框样式(css边框样式属性使用的是)
    CSS列表样式属性list是怎样的?  若list-style-image属性值为none或指定url地址的图片不能被显示时,此属性将发生作用。disc:CSS1实心圆circle:CSS1空心圆squ......
  • css颜色(css颜色表示方法)
    css如何改变按钮的背景颜色和文字颜色?ys{border:1solid#FFCC00;color:#FFCCFF;font-size:9pt;font-style:normal;font-variant:normal;font-weight:normal;height:1......
  • css-常用布局-基础的五种
    三栏布局:如果不考虑高度,即用内容填充高度的话,是可以用inline-block和calc()实现布局的。但适用性差。float和position的兼容性好,但float会用到calc属性影响兼容性。calc和......
  • 【前端】总结一下前端css样式规范
    (总结一下前端css样式规范)前端样式CSS规范通用规范//badpadding-bottom:0px;margin:0em;//goodpadding-bottom:0;margin:0;如果CSS可以做到,就不要使用......
  • 使用iconfont阿里多色矢量图标
    一、问题与解决方法问题:虽然unicode和font-class很好,但你会发现都不支持多色模式。解决:引用方法名symbol来解决。通过mini-program-iconfont-cli把iconfont图标批量换成......
  • css 背景渐变
    1.渐变从左到右background:linear-gradient(toright,#000,#fff); 2.渐变从上到下background:linear-gradient(tobottom,#000,#fff); 3.角度渐变(60°)background......
  • css换行
    1.word-break:break-all;只对英文起作用,以字母作为换行依据2.word-wrap:break-word;只对英文起作用,以单词作为换行依据3.white-space:pre-wrap;只对中文起作用,强制......
  • 【CSS】464- 5种 CSS 浮动和清除浮动的方法
    浮动是布局的时用到的一种技术,能够方便我们进行布局。1、浮动的设置:css属性float:left/right/none左浮动/右浮动/不浮动(默认)2、浮动的原理:使当前元素脱离普通流,相当于浮动起......