提问者:小点点

使用PHP实现@font-face路径的自动化


我对Php很陌生,想知道我是否可以自动化这个过程。 有没有一种方法可以使用PHP使它更紧凑一点? 以便我可以简单地更新自定义字体,只需将其放在一个目录中(称为fonts)。 欢迎所有的想法! 如果你知道一个更好的解决方案,或只是建议我不应该这样做,这也是好的。

/* ======================================================
    ► FONT-LIBRARY
   ====================================================== */

/*Brandon Grotesque*/

@font-face {
    font-family: 'brandon_thin';
    src: url('../fonts/Brandon_Grotesque/Brandon_thin/brandon_thin.woff2') format('woff2'),
         url('../fonts/Brandon_Grotesque/Brandon_thin/brandon_thin.woff') format('woff'),
         url('../fonts/Brandon_Grotesque/Brandon_thin/brandon_thin.ttf') format('truetype'),
         url('../fonts/Brandon_Grotesque/Brandon_thin/brandon_thin.svg#brandon_grotesquethin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_thin_it';
    src: url('../fonts/Brandon_Grotesque/Brandon_thin_it/brandon_thin_it.woff2') format('woff2'),
         url('../fonts/Brandon_Grotesque/Brandon_thin_it/brandon_thin_it.woff') format('woff'),
         url('../fonts/Brandon_Grotesque/Brandon_thin_it/brandon_thin_it.ttf') format('truetype'),
         url('../fonts/Brandon_Grotesque/Brandon_thin_it/brandon_thin_it.svg#brandon_grotesquethin_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_light';
    src: url('../fonts/Brandon_Grotesque/Brandon_light/brandon_light.woff2') format('woff2'),
         url('../fonts/Brandon_Grotesque/Brandon_light/brandon_light.woff') format('woff'),
         url('../fonts/Brandon_Grotesque/Brandon_light/brandon_light.ttf') format('truetype'),
         url('../fonts/Brandon_Grotesque/Brandon_light/brandon_light.svg#brandon_grotesquelight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_light_it';
    src: url('../fonts/Brandon_Grotesque/Brandon_light_it/brandon_light_it.woff2') format('woff2'),
         url('../fonts/Brandon_Grotesque/Brandon_light_it/brandon_light_it.woff') format('woff'),
         url('../fonts/Brandon_Grotesque/Brandon_light_it/brandon_light_it.ttf') format('truetype'),
         url('../fonts/Brandon_Grotesque/Brandon_light_it/brandon_light_it.svg#brandon_grotesquelight_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_reg';
    src: url('../fonts/Brandon_Grotesque/Brandon_reg/brandon_reg.woff2') format('woff2'),
         url('../fonts/Brandon_Grotesque/Brandon_reg/brandon_reg.woff') format('woff'),
         url('../fonts/Brandon_Grotesque/Brandon_reg/brandon_reg.ttf') format('truetype'),
         url('../fonts/Brandon_Grotesque/Brandon_reg/brandon_reg.svg#brandon_grotesque_regularRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_reg_it';
    src: url('../fonts/Brandon_Grotesque/Brandon_reg_it/brandon_reg_it.woff2') format('woff2'),
         url('../fonts/Brandon_Grotesque/Brandon_reg_it/brandon_reg_it.woff') format('woff'),
         url('../fonts/Brandon_Grotesque/Brandon_reg_it/brandon_reg_it.ttf') format('truetype'),
         url('../fonts/Brandon_Grotesque/Brandon_reg_it/brandon_reg_it.svg#brandon_grotesqueRgIt') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_med';
    src: url('../fonts/Brandon_Grotesque/Brandon_med/brandon_med.woff2') format('woff2'),
         url('../fonts/Brandon_Grotesque/Brandon_med/brandon_med.woff') format('woff'),
         url('../fonts/Brandon_Grotesque/Brandon_med/brandon_med.ttf') format('truetype'),
         url('../fonts/Brandon_Grotesque/Brandon_med/brandon_med.svg#brandon_grotesquemedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_med_it';
    src: url('../fonts/Brandon_Grotesque/Brandon_med_it/brandon_med_it.woff2') format('woff2'),
         url('../fonts/Brandon_Grotesque/Brandon_med_it/brandon_med_it.woff') format('woff'),
         url('../fonts/Brandon_Grotesque/Brandon_med_it/brandon_med_it.ttf') format('truetype'),
         url('../fonts/Brandon_Grotesque/Brandon_med_it/brandon_med_it.svg#brandon_grotesqueMdIt') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_bld';
    src: url('../fonts/Brandon_Grotesque/Brandon_bld/brandon_bld.woff2') format('woff2'),
         url('../fonts/Brandon_Grotesque/Brandon_bld/brandon_bld.woff') format('woff'),
         url('../fonts/Brandon_Grotesque/Brandon_bld/brandon_bld.ttf') format('truetype'),
         url('../fonts/Brandon_Grotesque/Brandon_bld/brandon_bld.svg#brandon_grotesquebold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_bld_it';
    src: url('../fonts/Brandon_Grotesque/Brandon_bld_it/brandon_bld_it.woff2') format('woff2'),
         url('../fonts/Brandon_Grotesque/Brandon_bld_it/brandon_bld_it.woff') format('woff'),
         url('../fonts/Brandon_Grotesque/Brandon_bld_it/brandon_bld_it.ttf') format('truetype'),
         url('../fonts/Brandon_Grotesque/Brandon_bld_it/brandon_bld_it.svg#brandon_grotesquebold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_blk';
    src: url('../fonts/Brandon_Grotesque/Brandon_blk/brandon_blk.woff2') format('woff2'),
         url('../fonts/Brandon_Grotesque/Brandon_blk/brandon_blk.woff') format('woff'),
         url('../fonts/Brandon_Grotesque/Brandon_blk/brandon_blk.ttf') format('truetype'),
         url('../fonts/Brandon_Grotesque/Brandon_blk/brandon_blk.svg#brandon_grotesqueblack') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'brandon_blk_it';
    src: url('../fonts/Brandon_Grotesque/Brandon_blk_it/brandon_blk_it.woff2') format('woff2'),
         url('../fonts/Brandon_Grotesque/Brandon_blk_it/brandon_blk_it.woff') format('woff'),
         url('../fonts/Brandon_Grotesque/Brandon_blk_it/brandon_blk_it.ttf') format('truetype'),
         url('../fonts/Brandon_Grotesque/Brandon_blk_it/brandon_blk_it.svg#brandon_grotesqueblack_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

(抱歉英语不好)


共1个答案

匿名用户

您可以使用SASS mixin来做一些更易读的事情。

这里有一个我经常使用的mixin:

@mixin font-face($font-name, $file-name, $weight: normal, $style: normal) {
  @font-face {
    font-family: quote($font-name);
    src: url($file-name + '.otf') format('opentype');
    src: url($file-name + '.eot');
    src: url($file-name + '.eot?#iefix')  format('embedded-opentype'),
    url($file-name + '.woff') format('woff'),
    url($file-name + '.ttf')  format('truetype'),
    url($file-name + '.svg##{$font-name}')  format('svg');
    font-weight: $weight;
    font-style: $style;
  }
}

比如,在我能做到这一点之后:

// BRANDON GROTESQUE
// ================================

$directory-font-brandonGrotesque: './Brandon-Grotesque';

@include font-face('Brandon Grotesque', $directory-font-brandonGrotesque + '/blabla', 300, 'italic');
@include font-face('Brandon Grotesque', $directory-font-brandonGrotesque + '/blabla', 300);
@include font-face('Brandon Grotesque', $directory-font-brandonGrotesque + '/blabla', 400);
@include font-face('Brandon Grotesque', $directory-font-brandonGrotesque + '/blabla', 500);
@include font-face('Brandon Grotesque', $directory-font-brandonGrotesque + '/blabla', 700);

如果你真的需要自动完成,我认为GULP或任何其他任务管理器都可以帮助你实现。