PHP-скрипт для загрузки шрифтов по мере необходимости

Я ищу способ добавлять шрифты по мере необходимости.

Изначально у меня было выбрано 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
?>

Кроме того, тег ссылки требует | между названиями шрифтов ... Понятия не имею, как это сделать. Формат для всех из них, предоставляемый Google: ‹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 '>

Спасибо!


php webfonts reduction load-time
person Casey Dwayne    schedule 26.10.2012    source источник
comment
$main = $cardo."|".$crimson."|".$philosopher."|";? это работает?   -  person Green Black    schedule 27.10.2012

Ответы (3)


arrow_upward
1
arrow_downward 

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;
person Hashem Qolami    schedule 26.10.2012
comment
Ты, мой мужчина, классный. Большое спасибо, это сработало как шарм! - person Casey Dwayne; 27.10.2012
comment
@kcdwayne, пожалуйста, рассмотрите возможность голосования / принятия моего ответа, если вы сочли его полезным :) - person Hashem Qolami; 27.10.2012

arrow_upward
0
arrow_downward

Попробуй это

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

Вышеупомянутое позволяет вам устанавливать разные наборы шрифтов для страниц и не ограничивается только основным / всем. Все, что вам нужно сделать, это передать функции различные клавиши шрифтов, которые вы хотите включить, через запятую.

person Nikolaos Dimopoulos    schedule 26.10.2012

arrow_upward
0
arrow_downward

Спасибо за все ответы! Вот код, который я использовал (на основе ответа, предоставленного Хашемом Колами)

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

Спасибо еще раз!

person Casey Dwayne    schedule 26.10.2012