根据需要加载字体的 PHP 脚本答案

【问题标题】：PHP Script to load fonts as needed根据需要加载字体的 PHP 脚本
【发布时间】：2012-10-17 04:21:49
【问题描述】：

我正在寻找一种“按需”添加字体的方法。

我最初在构建这个特定网站时选择了 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
?>

另外，链接标签需要一个 |在字体名称之间......我不知道该怎么做。谷歌提供的所有格式都是

谢谢！

【问题讨论】：

$main = $cardo."|".$crimson."|".$philosopher."|"; ?这行得通吗？

标签： php webfonts reduction load-time

【解决方案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;

【讨论】：

你，我的男人，太棒了。非常感谢，它就像一个魅力！
@kcdwayne，不客气，如果您觉得有用，请考虑投票/接受我的回答:)

【解决方案2】：

<?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" />

?>

【讨论】：

【解决方案3】：

试试这个

// 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;
    }
};

以上允许您为页面设置不同的字体集，并且不仅限于主要/全部。您所要做的就是在函数中传递您想要包含的字体的不同键，用逗号分隔。

【讨论】：

【解决方案4】：

感谢所有回复！这是我使用的代码（基于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'));
?>

这是一个方便的小sn-p代码，所以我想发布一个“完成”版本，没有我原来帖子的错误。这有助于为慢速网速（如 3G 移动浏览器）加载时间。从现在开始，这颗宝石将出现在我的所有网站中:)

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

再次感谢！

【讨论】：