css 引入字体、屏幕分辨率设置不同宽度适应

最新推荐文章于 2025-06-29 13:11:25 发布

原创最新推荐文章于 2025-06-29 13:11:25 发布 · 2.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css引入字体 #css适应屏幕大小

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用CSS引入自定义字体及根据不同屏幕分辨率调整元素宽度的方法。为了确保跨浏览器兼容性，提供了多种字体格式示例，并通过媒体查询实现了响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章将记录我在开发中遇到的css相关的问题奥!

1.css引入字体:

我已经下载好字体,并且放在了font目录下

@font-face {
  font-family: 'Agency';   /*字体名称*/
  src: url('../font/AgencyFB.ttf');       /*字体源文件*/
}
.list_num{
	font-family: 'Agency';   /*字体名称,就是上面定义的名称*/
	font-size: 20px;
}

不同浏览器字体的格式有差别(这部分是我转载的,考虑到可能有同学会要适应浏览器)

字体后缀和浏览器有关，如下所示
* .TTF或.OTF，适用于Firefox 3.5、Safari、Opera 
* .EOT，适用于Internet Explorer 4.0+ 
* .SVG，适用于Chrome、IPhone 
比如:
@font-face {
    font-family: 'HansHandItalic';
    src: url('fonts/hanshand-webfont.eot');
    src: url('fonts/hanshand-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/hanshand-webfont.woff') format('woff'),
         url('fonts/hanshand-webfont.ttf') format('truetype'),
         url('fonts/hanshand-webfont.svg#webfont34M5alKg') format('svg');
    font-weight: normal;
    font-style: normal;
}

2.css根据屏幕分辨率设置不同宽度大小

@media screen and (min-width: 1402px){
	#container{
		width: 970px;
	}
}
 
/*默认   max:1401以下   min 1401px以上*/

@media screen and (max-width: 1401px){
	#container{
		width: 970px;
	}
}

语法:@media screen and (判断属性){ CSS样式选择器 }

注意: 1.max-width:1401px以下的 min-width:1402px 以上的 (这是我自己的理解)

2.如果要兼容IE9以下版本浏览器需要加入一个google的JS (亲测OK的)