【发布时间】：2016-10-21 18:19:07
【问题描述】：
我正在尝试让 4 种图标字体（电话、电子邮件、工作室和小时文本）根据屏幕大小进行缩放。 (my website - scroll below slider
我已经成功地制作了文本比例，但不是图标字体。
这是我目前使用的代码（来自https://colorlib.com/wp/font-face-inside-media-query/）：
@media screen and (max-width: 299px) {
@font-face {
font-family: 'debssite';
src: url('./fonts/debssite.svg?#debssite') format('svg');
font-size: 10vw;
}
@media screen and (min-width: 300px) and (max-width: 799px) {
@font-face {
font-family: 'debssite';
src: url('fonts/debssite.eot');
src: url('fonts/debssite.eot?#iefix') format('embedded-opentype'),
url('fonts/debssite.woff2?') format('woff2'),
url('fonts/debssite.woff?') format('woff'),
url('fonts/debssite.ttf?') format('truetype'),
url('fonts/debssite.svg?') format('svg');
font-weight: normal;
font-style: normal;
font-size: 10px;
}
p{
font-size: 10vw;}
}
@media screen and (min-width: 800px) {
@font-face {
font-family: 'debssite';
src: url('./fonts/debssite.svg?#debssite') format('svg');
font-size: 2px;
}
}
我的原始代码来自这个代码块：
/********************
Icon Fonts To Use
********************/
@font-face {
font-family: 'debssite';
src: url('fonts/debssite.eot');
src: url('fonts/debssite.eot?#iefix') format('embedded-opentype'),
url('fonts/debssite.woff2?') format('woff2'),
url('fonts/debssite.woff?') format('woff'),
url('fonts/debssite.ttf?') format('truetype'),
url('fonts/debssite.svg?') format('svg');
font-weight: normal;
font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'debssite';
src: url('./fonts/debssite.svg?#debssite') format('svg');
}
}
*/
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: "debssite";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-calendar:before {
content: "\e800";
font-size: 64px;
color: #b31b1b;
}
.icon-location:before {
content: "\e801";
font-size: 64px;
color: #b31b1b;
}
.icon-mail:before {
content: "\e802";
font-size: 64px;
color: #b31b1b;
}
.icon-facebook:before {
content: "\f09a";
font-size: 32px;
color: #b31b1b;
margin-right 4%;
}
.icon-mobile:before {
content: "\f10b";
font-size: 64px;
color: #b31b1b;
margin:0px;
}
.icon-youtube:before {
content: "\f167";
font-size: 32px;
color: #b31b1b;
margin-right 4%;
}
.icon-instagram:before {
content: "\f16d";
font-size: 32px;
color: #b31b1b;
margin-right 4%;
}
.icon-pinterest:before {
content: "\f231";
font-size: 32px;
color: #b31b1b;
margin:10px;
}
/**********************/
非常感谢任何建议/帮助。
谢谢
************编辑**************
尝试了 Nathalia 的建议，我决定为每个字段添加颜色更改：
@media screen and (max-width: 299px) {
.icon-calendar {
font-size: 10vw;
color: #0000ff;
}
}
@media screen and (min-width: 300px) and (max-width: 799px) {
.icon-mobile, .caption{
font-size: 10vw;
color: #00ff00;
}
p {font-size: 10vw;
color: #3ef43e;
}
}
@media screen and (min-width: 800px) {
.icon-mail, .item {
font-size: 2vw;
color: #551a8b;
}
}
颜色变化只在“.item”和“.caption”类上触发，只影响文本而不影响图标。现在我的 HTML 设置如下：
<div class="item">
<span class = "icon-mobile"></span>
<span class="caption">Call</span>
</div>
<div class="item">
<span class = "icon-mail"></span>
<span class="caption">Email</span>
</div>
<div class="item">
<span class = "icon-location"></span>
<span class="caption">Studio</span>
</div>
<div class="item">
<span class = "icon-calendar"></span>
<span class="caption">Hours</span>
</div>
这是我在 CSS 中为它们设置样式的方式（使用“contact_details”类）：
/**********************
Contact Icon Fonts
**********************/
/*Icon Fonts*/
.contact_details{
text-align: center;
}
.item {
vertical-align: top;
display: inline-block;
width:auto;
height:auto;
margin:0% auto;
color: #b31b1b;
}
/* Text Below Icon Fonts*/
.caption {
display: block;
text-align: center;
}
/**********************/
我不知道为什么图标没有改变，但标题却改变了。他们应该有单独的类吗？
【问题讨论】：
-
对图标使用“display: none”。但不是其他任何东西（颜色和大小都是我尝试过的）。