PHP脚本根据需要加载字体

时间:2012-10-26 21:34:27

标签: php webfonts reduction load-time

我正在寻找一种根据需要添加字体的方法。

我最初从构建此特定网站时选择了4个Google API字体。现在它已经成长,我想把字体选择增加到9种选择。

我正在试图找到一种方法来通过PHP完成这项工作,但我是一名设计师,所以我的php是'呃'。

这是我所知道的php的“草稿”。

有人想快点帮帮我吗?

<?php //This is in an External PHP Command Page
$aladin = "Aladin";
$cardo = "Cardo:400,400italic";
$crimson = "Crimson+Text:700italic";
$euphoria = "Euphoria+Script";
$josefin = "Josefin+Slab:400,700";
$philosopher = "Philosopher:400,400italic";
$redressed = "Redressed";
$rouge = "Rouge+Script";
$vollkorn = "Vollkorn:400,400italic,700";

//Factory Presets
$all = "$aladin, $cardo, $crimson, $euphoria, $josefin, $philosopher, $redressed, $rouge, $vollkorn";
$main = "$cardo, $crimson, $philosopher,";

    function insertFonts ($fonts) {
        echo '<link href=\"//fonts.googleapis.com/css?family=';
        echo $fonts;
        echo '\' rel="stylesheet" type="text/css" />';  
        };
?>

然后在网页上。

<?php //This goes inside the <head> of X page
insertFonts($main); // OR insertFonts($aladin, $redressed, $euphoria); as needed
?>

此外,链接标记需要|在字体名称之间...我不知道如何做到这一点。 谷歌提供的所有格式都是         &LT; link href ='http://fonts.googleapis.com/css?family = Cardo:400,400italic | Crimson + Text:700italic | Euphoria + Script | Philosopher:400,400italic | Vollkorn:400,400italic,700 | Josefin + Slab:400,700 |已修改| Aladin | Rouge + Script'rel =''stylesheet'type ='text / css'&gt;

谢谢!

4 个答案:

答案 0 :(得分:1)

function insertFonts($f){
    $output = '';
    $fonts = array(
        'aladin'        =>  "Aladin",
        'cardo'         =>  "Cardo:400,400italic",
        'crimson'       =>  "Crimson+Text",
        'euphoria'      =>  "Euphoria+Script",
        'josefin'       =>  "Josefin+Slab, serif",
        'philosopher'   =>  "Philosopher, italic",
        'redressed'     =>  "Redressed, cursive",
        'rouge'         =>  "Rouge+Script, cursive",
        'vollkorn'      =>  "Vollkorn, serif"
    );

foreach ($f as $val) {
    if(array_key_exists($val, $fonts)){
        if(strlen($output)>0) $output .="|";
        $output .="$fonts[$val]";
    }
}
return strlen($output)>0 ? "<link href=\"//fonts.googleapis.com/css?family=$output\" rel='stylesheet' type='text/css' />" : '';
}

// Usage
echo insertFonts(array('cardo','josefin'));

但是如果你想分别加载每个字体,可以这样改变方法:

foreach ($f as $val) {
    if(array_key_exists($val, $fonts)){
        $output .="<link href=\"//fonts.googleapis.com/css?family=$fonts[$val]\" rel='stylesheet' type='text/css' />\n";
    }
}

return $output;

答案 1 :(得分:0)

<?php
header('Content-Type: text/plain'); // this is just for the example

$fonts = array();
$fonts['aladin'] = "Aladin";
$fonts['cardo'] = "Cardo:400,400italic";
$fonts['crimson'] = "Crimson+Text:700italic";
$fonts['euphoria'] = "Euphoria+Script";
$fonts['josefin'] = "Josefin+Slab:400,700";
$fonts['philosopher'] = "Philosopher:400,400italic";
$fonts['redressed'] = "Redressed";
$fonts['rouge'] = "Rouge+Script";
$fonts['vollkorn'] = "Vollkorn:400,400italic,700";

//Factory Presets
$all = implode('|', $fonts);
$main = implode('|', array($fonts['cardo'], $fonts['crimson'], $fonts['philosopher']));

function insertFonts ($fonts) {
    echo '<link href="//fonts.googleapis.com/css?family='.$fonts.'" rel="stylesheet" type="text/css" />'.PHP_EOL;
};


insertFonts($all); // <link href="//fonts.googleapis.com/css?family=Aladin|Cardo:400,400italic|Crimson+Text:700italic|Euphoria+Script|Josefin+Slab:400,700|Philosopher:400,400italic|Redressed|Rouge+Script|Vollkorn:400,400italic,700" rel="stylesheet" type="text/css" />
insertFonts($main); // <link href="//fonts.googleapis.com/css?family=Cardo:400,400italic|Crimson+Text:700italic|Philosopher:400,400italic" rel="stylesheet" type="text/css" />

?>

答案 2 :(得分:0)

试试这个

// These are the keys of the array in the `insertFonts` function
// Here only as an example
$which = 'cardo,crimson,philosopher';

function insertFonts ($which = 'all') 
{
    $fonts = array(
        'alladin'     => "Aladin",
        'cardo'       => "Cardo:400,400italic",
        'crimson'     => "Crimson+Text",
        'euphoria'    => "Euphoria+Script",
        'josefin'     => "Josefin+Slab, serif",
        'philosopher' => "Philosopher, italic",
        'redressed'   => "Redressed, cursive",
        'rouge'       => "Rouge+Script, cursive",
        'vollkorn'    => "Vollkorn, serif",
    );

    // $which can be either all (or ommitted) or contain
    // the keys of the fonts defined in the $fonts array above
    $final_fonts = array();
    if ($which == 'all')
    {
        $final_fonts = $fonts;
    }
    else
    {
        $keys = explode(',', $which);
        if (is_array($keys)) 
        {
            foreach ($keys as $item) 
            {
                if (array_key_exists($item, $fonts)
                {
                    $final_fonts[$item] = $fonts[$item];
                }
            }
        }
    }

    if (count($final_fonts) > 0)
    {
        $font_line = implode("|", $final_fonts);
        $output    = '<link href="//fonts.googleapis.com/css?family='
                   . $font_line 
                   . ' rel="stylesheet" type="text/css" />'; 
        echo $output;
    }
};

以上允许您为页面设置不同的字体集,并且不仅限于main / all。您所要做的就是将所需字体的不同键传递给函数,用逗号分隔。

答案 3 :(得分:0)

感谢所有回复! 这是我使用的代码(根据Hashem Qolami提供的答案)

<?php 
function insertFonts($f){
$output = '';
$fonts = array(
    'aladin'        =>  "Aladin",
    'cardo'         =>  "Cardo:400,400italic",
    'crimson'       =>  "Crimson+Text:700italic",
    'euphoria'      =>  "Euphoria+Script",
    'josefin'       =>  "Josefin+Slab:400,700",
    'philosopher'   =>  "Philosopher:400,400italic",
    'redressed'     =>  "Redressed",
    'rouge'         =>  "Rouge+Script",
    'vollkorn'      =>  "Vollkorn:400,400italic,700",
    'main'          =>  "Cardo:400,400italic|Crimson+Text:700italic|Philosopher:400,400italic",
    'cursives'      =>  "Euphoria+Script|Redressed|Rouge+Script"
);

foreach ($f as $val) {
    if(strlen($output)>0) $output .="|";
    $output .="$fonts[$val]";
}
return "<link href=\"//fonts.googleapis.com/css?family=$output\" rel='stylesheet' type='text/css' />";
}

// Usage
echo insertFonts(array('main', 'cursives', 'vollkorn', 'aladin', 'josefin'));
?>

这是一个方便的小代码片段,所以我想发布一个'完成'的版本,没有我的原始帖子的错误。这有助于加快网络速度(如3G移动浏览器)。从现在开始,这个宝石将进入我的所有网站:)

您可以在此处查看结果:http://www.creativedesigninfluence.com/phptest/font-test2.php

再次感谢!