css样式face,css样式方框属性

在CSS 里面font-family，font-face，这两个有什么不同？

第一个是指定字体。

.youclass{font-family:文鼎POP;}。

此处 font-family 指定字体为 文鼎POP ，但电脑上没装 文鼎POP 字体的人看网页，将看不到这个字体效果，任看到电脑上默认的 宋体 或 微软雅黑体，因此针对中文操作系统来说：为保证网页效果，通常只能指定：宋体、黑体、微软雅黑之类的系统上默认自带的字体。

第二个 font-face 的用法是载入一个字体。

@font-face { font-family:comic;src:url(文鼎POP.eot); } 。

将文鼎POP 的 .eot 格式文件传到服务器上，然后用 font-face 加载到网页中，别人电脑没装这个字体，但用 font-face 加载后同样能在网页上显示出文鼎POP的效果。

css特点：

结构与样式分离的方式,便于后期维护与改版;

样式定义精确到像素的级别;

可以用多套样式,使网页有任意样式切换的效果(如:的开,关灯效果)；

降低服务器的成本。

相关问答

Q1: 什么是@font-face及font-face如何在css中使用

@font-face {

font-family: YourWebFontName;/*自定义的字体名称，最好是使用下载的默认字体，他将被引用到Web元素中的font-family*/

src: source [format][,source [format]]*;/*自定义的字体的存放路径*/

[font-weight: weight];

[font-style: style];/*weight定义字体是否为粗体，style主要定义字体样式，如斜体*/

}

不过浏览器对各种字体解析不一致，下载到的字体通常只有.ttf格式。那么要兼容各主流浏览器就得通过在线字体转换网站转换得到这几种字体【.eot,.woff,.ttf,.svg】

那么具体用法：

html：

h2 class="Demo"Demo/h2

先自定义好字体

@font-face {

font-family: 'NeuesBauenDemo';

src: url('../fonts/neues_bauen_demo-webfont.eot');

src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'),

url('../fonts/neues_bauen_demo-webfont.woff') format('woff'),

url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'),

url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');

font-weight: normal;

font-style: normal;

}

最后引用：

h2.Demo {

font-family: 'NeuesBauenDemo'/*通过这个引用下载的字体格式*/

}

Q2: css中使用@font-face声明图标文字为什么显示出来边框

你的代码写错了，这应该是：!important。注意一下细节，在css中这个如果是正确的他应该显示为红色，在dw中是这样，我不知道你这个是用的什么，所以不是很清楚，但是一般的关键字都是不会和普通的代码的颜色一样。

Q3: 关于CSS中@font-face 嵌入字体的用法

关于@font-face的介绍（来自w3c）

网页中的eot字体文件

用@font-face来加载服务器上的字体后，是需要用font-family来作用到指定的类、ID、标签上才可以的。

比如对h1定义test这个字体，那么要用font-family来声明使用这个test才可以。

@font-face用的不是太多，一个中文字体集的字体都有好几M，不像英文字体那样比较小，所以如果需要做特殊的艺术字或者要的效果还是做成图片来的简单、高效。

Q4: 什么是@font-face，以及在css当中如何使用

@ font-face的是一个CSS规则，允许你输入自己的字体出现在网站上，即使在特定的字体在访问者的计算机上没有安装。这条规则最重要的是，它为设计师打开了一个全新的世界。您可以使用任何你喜欢的字体。

下面的语法是你如何使用@ font-face的。首先，定义新的字体所提供的名称和说明的字体。

@font-face {

    font-family: DeliciousRoman;

    src: url('');

}

然后你引用它。

p {

    font-family: DeliciousRoman, Helvetica, Arial, sans-serif;

}

就是这样。

在前面的例子中使用外部来源。但是，如果将字体文件是在您的服务器上，那么你可以参考以下的方式：

@font-face {

    font-family: DeliciousRoman;

    src: url('…/Delicious-Roman.otf');

}

此外，还有其他三个字体属性，您应该知道的。首先是font-stretch，您可以设定的字体会被拉伸，“normal’”是默认的。此外，有字体的风格，让你的字体是斜或斜体。最后，还有字体的重量，最后字体为粗体，等你可以自己设置

@font-face {

    font-family: DeliciousRoman;

    src: url('…/Delicious-Roman.otf');

    font-stretch: condensed;

    font-style: oblique;

    font-weight: bold;

}

建议：

字体渲染是一件棘手的事情 - 尤其是老移动浏览器。你应该总是测试，你可以尽可能多的设备支持。发现问题的速度越快越好。

最后，请记住，使用许多不同的字体可能会减慢你的网站需要时间来加载所有这些字体！

望采纳！