css引用字体问题

简介: css引用字体问题

在CSS中通过@font-face属性来实现网页中嵌入特殊字体。首先获取要使用字体的三种文件格式.EOT、.TTF或.OTF、.SVG,确保能在主流浏览器中都能正常显示该字体。.EOT,适用于Internet Explorer 4.0+

.TTF或.OTF,适用于Firefox 3.5、Safari、Opera.SVG,适用于Chrome、IPhone最常见的是.TTF文件,需要通过这种文件格式转换为其余两种文件格式。在css中进行如下声明:

@font-face {
  font-family: 'fontNameRegular';
  src: url('fontName.eot');
  src: local('fontName Regular'),
  local('fontName'),
  url('fontName.woff') format('woff'),
  url('fontName.ttf') format('truetype'),
  url('fontName.svg#fontName') format('svg');
}
/*其中fontName替换为你的字体名称*/

在css中使用这个字体h1{font-family: fontNameRegular}


相关文章
|
7小时前
|
Web App开发 编解码 前端开发
告别固定字体大小:CSS使用相对单位提升网页可访问性和兼容性
在 Web 开发领域中,有很多误解流传,即使它们被反驳了很多次也仍然存在。"外部链接应该总是在新标签页中打开" 就是一个很好的例子。CSS Tricks 在将近十年前就对此进行了详细的解释(简而言之:大多数情况下是错误的),但它似乎仍然在某些角落中存在。
|
7月前
|
前端开发
【CSS】CSS字体样式【CSS基础知识详解】
【CSS】CSS字体样式【CSS基础知识详解】
|
7小时前
|
前端开发 UED
【专栏:CSS 基础篇】CSS 字体与文本样式:美化你的网页内容
【4月更文挑战第30天】网页设计中,字体和文本样式至关重要,影响视觉效果和用户体验。CSS允许设计师设置字体家族、大小、颜色、加粗、倾斜、行高和对齐方式等。高级特性包括引入外部字体和使用字体变体。响应式设计适应不同设备,确保良好阅读体验。实际案例和最佳实践强调易读性和一致性。掌握这些技巧能提升网页美感和用户交互,创造更多可能。
|
7小时前
|
前端开发
CSS样式引用方式的区别
CSS样式引用方式的区别
|
7小时前
|
前端开发
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
css样式字体、文本、背景属性,盒子模型详解,轻松调教出优美的字体和网页背景色
|
7小时前
|
前端开发 JavaScript UED
【Web 前端】css的引用有哪些,link和@import的区别?
【4月更文挑战第22天】【Web 前端】css的引用有哪些,link和@import的区别?
|
7小时前
|
前端开发
css_字体混合正片叠底与发光
css_字体混合正片叠底与发光
15 0
css_字体混合正片叠底与发光
|
7小时前
|
前端开发 开发者 流计算
css字体
【4月更文挑战第23天】css字体
14 3
|
7小时前
|
前端开发
css 字体渐变样式(设置字体渐变样式+附加实现源码)
css 字体渐变样式(设置字体渐变样式+附加实现源码)
22 0
|
7小时前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
62 1