Adobe fontlarının IE9'da CSS3 @ font-face ile çalışmasını sağlayın

Küçük bir intranet uygulaması oluşturma sürecindeyim ve şansım olmadan, son zamanlarda satın aldığım Adobe fontunu kullanmaya çalışıyorum . Bildiğim gibi, bizim durumumuzda bu bir lisans ihlali değil.

Tüm büyük tarayıcıları hedeflemek için fontun .ttf / .otf sürümlerini .woff, .eot ve .svg'ye dönüştürdüm. Kullandığım @ font-face sözdizimi temelde Font Spring'in sunduğu kurşun geçirmez olanıdır :

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot');
    src: url('myfont-webfont.eot?#iehack') format('eot'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

Alanlar arası referanslara izin vermek için HTTP üstbilgilerini (Access-Control-Allow-Origin = "*" eklendi) değiştirdim. FF ve Chrome'da mükemmel çalışıyor, ancak IE9'da şunu elde ediyorum:

CSS3111: @font-face encountered unknown error.  
myfont-webfont.woff
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
myfont-webfont.ttf

Yazı tipini .ttf / .otf'tan .woff'a dönüştürürken bir de .afm dosyası aldığımı fark ettim , ancak önemli olup olmadığı konusunda bir fikrim yok ...

Nasıl çalışacağına dair bir fikrin var mı?

[Düzenle] - Web sitelerimi (yazı tipleri de, ancak statik içerik için ayrı bir dizin ve alt alan adı altında) IIS 7.5 altında barındırıyorum

Size sadece "CSS3114" hatasını nasıl düzelteceğinizi açıklayabilirim.
TTF dosyanızın yerleştirme düzeyini değiştirmelisiniz.

Uygun aracı kullanarak, izin verilen yüklenebilir yerleştirmeye ayarlayabilirsiniz .
64 bitlik bir sürüm için, @ user22600'ün cevabını kontrol edin .

Knu'nun dediği gibi, bu aracı kullanabilirsiniz , ancak yalnızca MS-DOS için derlenmiştir. Win64 için derledim. İndir .

Kullanımı:

1. .Exe dosyasını, değiştirmeniz gereken yazı tipiyle aynı klasöre yerleştirin

2. Komut satırında o dizine gidin

3. embed fontname.fonttypeyazı tipi adını dosya adı ile ve yazı tipi türünü ie uzantısıyla değiştirerekembed brokenFont.ttf

4. Hepsi tamam! Yazı tipiniz şimdi çalışmalıdır.

İe yazı tipinin biçimini 'eot' değil 'embedded-opentype' olarak ayarlamalısınız. Örneğin:

src: url('fontname.eot?#iefix') format('embedded-opentype')

Şu hatayı alıyordum:

CSS3114: @ font-face, OpenType yerleştirme izni kontrolünde başarısız oldu. İzin Yüklenebilir olmalıdır.
fontname.ttf

Aşağıdaki kodu kullandıktan sonra sorunum çözüldü ....

src: url('fontname.ttf') format('embedded-opentype')

Bana yardım ettiğiniz için teşekkür ederim çocuklar!
Şerefe,
Renjith.

Bunu deneyin, bu satırları web.config dosyasına ekleyin.

<system.webServer>
  <staticContent>
     <mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
  </staticContent>
</system.webServer>

Farklı Bir Cevap: Hukuki sorunlar.

Bunu yapmadan önce dikkat etmeniz gereken birkaç nokta var. İlk olarak, bu hatayı almak için, IE'de elementi inceleyin, sekmelerinizi değiştirin ve hataları arayın, konsolda "CSS3114" göründüğüne inanıyorum.

Anlamanız gereken, bunun bir lisanslama sorunu olduğu. Bu hataya neden olan bir yazı tipini yüklemeye çalışıyorsanız, dosya üzerinde yazı tipini kullanma izniniz yoksa ve izniniz yoksa, büyük olasılıkla bir yazı tipini kaybedebilirsiniz. Lisansınız olmadığı sürece bu yazı tipini bu şekilde kullanmakla ilgili yasal savaş (ki bu pek olası değildir). Bu nedenle, size "hayır" diyen tek tarayıcı olduğu için ilk kez IE'ye teşekkür edebilirsiniz, çünkü en azından şüpheli bir şey yaptığınızı bilmenizi sağlar.

Bununla birlikte, cevabınız burada:

Öncelikle .css'deki en iyi kodu kullandığınızdan emin olun, bunun için diğer css yanıtlarından bazılarına bakın.
IE 11 css örneği (tüm modern tarayıcılarda çalışır, IE9 için ince ayar yapılması gerekebilir):

@font-face {
font-family: "QuestionableLegalFont";
font-weight: bold;
src: url('../fonts/QuestionableLegalFont.ttf') format('truetype');
}

Ardından, çalışan bir web yazı tipine sahip olduğunuzdan emin olun (muhtemelen yazı tipinizi diğer tarayıcılarda görerek bunu zaten biliyorsunuzdur). Çevrimiçi bir yazı tipi dönüştürücüye ihtiyacınız varsa, burayı kontrol edin: https://onlinefontconverter.com/

Son olarak, "CSS3114" hatasından kurtulmak için. Çevrimiçi bir araç için burayı tıklayın: https://www.andrebacklund.com/fontfixer.html

IE9'un TTF yazı tiplerinin gömme bitlerinin Yüklenebilir olarak ayarlanmasını gerektirdiği doğrudur. Generator bunu otomatik olarak yapar, ancak şu anda Adobe yazı tiplerini başka nedenlerle engelliyoruz. Yakın gelecekte bu kısıtlamayı kaldırabiliriz.

Bu sorun yüzünden çok zaman harcadım. Sonunda kendim için harika bir çözüm buldum. Yalnızca .ttf yazı tipini kullanmadan önce. Ama IE'de çalışmaya başlayan fazladan bir yazı tipi biçimi ekledim.

Aşağıdaki kodu kullandım ve tüm tarayıcılarda cazibe gibi çalıştı.

@font-face {
font-family: OpenSans;
src: url(assets/fonts/OpenSans/OpenSans-Regular.ttf), 
url(assets/fonts/OpenSans/OpenSans-Regular.eot);
}

@font-face {
font-family: OpenSans Bold;
src: url(assets/fonts/OpenSans/OpenSans-Bold.ttf),
url(assets/fonts/OpenSans/OpenSans-Bold.eot);
}

Umarım bu birine yardımcı olur.

Bir Mac kullanıcısı olarak, yazı tipi gömme iznini düzeltmek için bahsedilen MS-DOS ve Windows komut satırı araçlarını kullanamadım. Ancak, izni 'Her şeye izin verilir' olarak ayarlamak için FontLab kullanarak bunu düzeltebileceğinizi öğrendim. Yazı tipi izninin Mac OS X'te Yüklenebilir olarak nasıl ayarlanacağına ilişkin bu tarifin diğerleri için de yararlı olacağını umuyorum .

Nodejs / npm konusunda bilginiz varsa, ttembed-js bir TTF yazı tipinde "yüklenebilir yerleştirmeye izin verildi" bayrağını ayarlamanın kolay bir yoludur. Bu, belirtilen .ttf dosyasını değiştirecektir:

npm install -g ttembed-js

ttembed-js somefont.ttf

Sorun, sunucu yapılandırmanızla ilgili olabilir - yazı tipi dosyaları için doğru başlıkları göndermiyor olabilir. IE9, çapraz kaynaklı web fontunun indirilmesini engelleyen sorusu için verilen yanıta bir göz atın .

EricLaw, Apache yapılandırmanıza aşağıdakileri eklemenizi önerir

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "http://mydomain.com"
    </IfModule>
</FilesMatch>

Bunu C kodu çalıştırmak yerine bir PHP betiği ile yapmak istiyorsanız (veya benim gibi bir Mac kullanıyorsanız ve Xcode ile derlemede yalnızca açılması için bir yıl beklemek zorunda değilsiniz), işte bir Yazı tipinden gömme izinlerini kaldırmak için kullanabileceğiniz PHP işlevi:

function convertRestrictedFont($filename) {
    $font = fopen($filename,'r+');
    if ($font === false) {
        throw new Exception('Could not open font file.');
    }

    fseek($font, 12, 0);

    while (!feof($font)) {
        $type = '';
        for ($i = 0; $i < 4; $i++) {
            $type .= fgetc($font);
            if (feof($font)) {
                fclose($font);
                throw new Exception('Could not read the table definitions of the font.');
            }
        }
        if ($type == 'OS/2') {
            // Save the location of the table definition
            // containing the checksum and pointer to the data
            $os2TableDefinition = ftell($font);
            $checksum = 0;

            for ($i = 0; $i < 4; $i++) {
                fgetc($font);
                if (feof($font)) {
                    fclose($font);
                    throw new Exception('Could not read the OS/2 table header of the font.');
                }
            }

            // Get the pointer to the OS/2 table data
            $os2TablePointer = ord(fgetc($font)) << 24;
            $os2TablePointer |= ord(fgetc($font)) << 16;
            $os2TablePointer |= ord(fgetc($font)) << 8;
            $os2TablePointer |= ord(fgetc($font));

            $length = ord(fgetc($font)) << 24;
            $length |= ord(fgetc($font)) << 16;
            $length |= ord(fgetc($font)) << 8;
            $length |= ord(fgetc($font));

            if (fseek($font, $os2TablePointer + 8, 0) !== 0) {
                fclose($font);
                throw new Exception('Could not read the embeddable type of the font.');
            }

            // Read the fsType before overriding it
            $fsType = ord(fgetc($font)) << 8;
            $fsType |= ord(fgetc($font));

            error_log('Installable Embedding: ' . ($fsType == 0));
            error_log('Reserved: ' . ($fsType & 1));
            error_log('Restricted License: ' . ($fsType & 2));
            error_log('Preview & Print: ' . ($fsType & 4));
            error_log('Editable Embedding: ' . ($fsType & 8));
            error_log('Reserved: ' . ($fsType & 16)); 
            error_log('Reserved: ' . ($fsType & 32));
            error_log('Reserved: ' . ($fsType & 64));
            error_log('Reserved: ' . ($fsType & 128));
            error_log('No subsetting: ' . ($fsType & 256));
            error_log('Bitmap embedding only: ' . ($fsType & 512));                         
            error_log('Reserved: ' . ($fsType & 1024));
            error_log('Reserved: ' . ($fsType & 2048));
            error_log('Reserved: ' . ($fsType & 4096));
            error_log('Reserved: ' . ($fsType & 8192));
            error_log('Reserved: ' . ($fsType & 16384));
            error_log('Reserved: ' . ($fsType & 32768));

            fseek($font, ftell($font) - 2);

            // Set the two bytes of fsType to 0
            fputs($font, chr(0), 1);
            fputs($font, chr(0), 1);

            // Go to the beginning of the OS/2 table data
            fseek($font, $os2TablePointer, 0);

            // Generate a new checksum based on the changed 
            for ($i = 0; $i < $length; $i++) {
                $checksum += ord(fgetc($font));
            }
            fseek($font, $os2TableDefinition, 0);
            fputs($font, chr($checksum >> 24), 1);
            fputs($font, chr(255 & ($checksum >> 16)), 1);
            fputs($font, chr(255 & ($checksum >> 8)), 1);
            fputs($font, chr(255 & $checksum), 1);

            fclose($font);

            return true;
        }
        for ($i = 0; $i < 12; $i++) {
            fgetc($font);
            if (feof($font)) {
                fclose($font);
                throw new Exception('Could not skip a table definition of the font.');
            }
        }
    }

    fclose($font);

    return false;
}

Bu kodu çalıştırmadan önce yazı tipi dosyanızı yedeklediğinizden emin olun ve bozulursa beni suçlamayın.

C'deki orijinal kaynak burada bulunabilir .

Ttfpatch kullanırken "tableversion 0, 1 veya hex: 003 olmalıdır" hatasını alan herkes için embed'i 64bit için derledim. Hiçbir şeyi değiştirmedim, sadece gerekli libs ekledim ve derledim. Risk size aittir.

Kullanım: ConsoleApplication1 font.ttf

http://www.mediafire.com/download/8x1px8aqq18lcx8/ConsoleApplication1.exe

Aşağıdaki kodu takip ederek çözebilirsiniz

@font-face {
  font-family: 'Font-Name';
  src: url('../fonts/Font-Name.ttf');
  src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype');
}

eotDosyanın ötesine konması gerektiğini buldum ttf. 'S under ise ttf, yazı tipi gösterileri doğru, IE9 hala bir hata atar düşündük.

Önermek:

@font-face {
  font-family: 'Font-Name';
  src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype');
  src: url('../fonts/Font-Name.ttf')  format('truetype');
}

Değil Tavsiye:

@font-face {
  font-family: 'Font-Name';
  src: url('../fonts/Font-Name.ttf')  format('truetype');
  src: url('../fonts/Font-Name.eot?#iefix') format('embedded-opentype');
  }

Ttfpatch aracını denedim ve benden çalışmadı. Internet Exploder 9 ve 10 hala şikayet ediyor.

Bu güzel Git özünü buldum ve sorunlarımı çözdü. https://gist.github.com/stefanmaric/a5043c0998d9fc35483d

Kodu kopyalayıp css'nize yapıştırmanız yeterlidir.

Yakın zamanda bu sorunla, yükleme sırasında konsolda CSS3114 ve CSS3111 hataları üreten .eot ve .otf yazı tiplerinde karşılaştım. Benim için işe yarayan çözüm, bir .ttf biçimi geri dönüşüyle ​​yalnızca .woff ve .woff2 biçimlerini kullanmaktı. .Woff biçimleri çoğu tarayıcıda .ttf'den önce kullanılacaktır ve font gömme izinleri sorununu (css3114) ve font adlandırma sorununu (css3111) tetiklemiyor gibi görünmektedir. Ben benim çözüm buldum CSS3111 ve CSS3114 konuda bu son derece yararlı maddeye ve aynı zamanda okuma font-face @ kullanımıyla ilgili bu makaleyi .

not: Bu çözüm, herhangi bir yazı tipi dosyasının yeniden derlenmesini, dönüştürülmesini veya düzenlenmesini gerektirmez. Yalnızca CSS'ye yönelik bir çözümdür. Test ettiğim yazı tipinin kendisi için oluşturulmuş .eot, .otf, .woff, .woff2 ve .svg sürümleri vardı, muhtemelen denediğimde 3114 hatası veren orijinal .ttf kaynağından, ancak .woff ve. woff2 dosyalarının bu sorundan muaf olduğu görülüyordu.

@ Font-face ile benim için işe yarayan şey buydu:

@font-face {
  font-family: "Your Font Name";
  font-weight: normal;
  src: url('your-font-name.woff2') format('woff2'),
       url('your-font-name.woff') format('woff'),
       url('your-font-name.ttf')  format('truetype');
}

IE'de @ font-face ile ilgili hataları tetikleyen şey buydu:

@font-face {
  font-family: 'Your Font Name';
  src: url('your-font-name.eot');
  src: url('your-font-name.eot?#iefix') format('embedded-opentype'),
       url('your-font-name.woff2') format('woff2'),
       url('your-font-name.woff') format('woff'),
       url('your-font-name.ttf')  format('truetype'),
       url('your-font-name.svg#svgFontName') format('svg');
}

Bu benim için çalışıyor:

@font-face {
  font-family: FontName;
  src: url('@{path-fonts}/FontName.eot?akitpd');
  src: url('@{path-fonts}/FontName.eot?akitpd#iefix') format('embedded-opentype'),
    url('@{path-fonts}/FontName.ttf?akitpd') format('truetype'),
    url('@{path-fonts}/FontName.woff?akitpd') format('woff'),
    url('@{path-fonts}/FontName.svg?akitpd#salvage') format('svg');
}

Bunu C / PHP kodunu çalıştırmak yerine bir Python komut dosyasıyla yapmak istiyorsanız, gömme izinlerini fonttan kaldırmak için kullanabileceğiniz bir Python3 işlevi:

def convert_restricted_font(filename):
with open(filename, 'rb+') as font:

    font.read(12)
    while True:
        _type = font.read(4)
        if not _type:
            raise Exception('Could not read the table definitions of the font.')
        try:
            _type = _type.decode()
        except UnicodeDecodeError:
            pass
        except Exception as err:
            pass
        if _type != 'OS/2':
            continue
        loc = font.tell()
        font.read(4)
        os2_table_pointer = int.from_bytes(font.read(4), byteorder='big')
        length = int.from_bytes(font.read(4), byteorder='big')
        font.seek(os2_table_pointer + 8)

        fs_type = int.from_bytes(font.read(2), byteorder='big')
        print(f'Installable Embedding: {fs_type == 0}')
        print(f'Restricted License: {fs_type & 2}')
        print(f'Preview & Print: {fs_type & 4}')
        print(f'Editable Embedding: {fs_type & 8}')

        print(f'No subsetting: {fs_type & 256}')
        print(f'Bitmap embedding only: {fs_type & 512}')

        font.seek(font.tell()-2)
        installable_embedding = 0 # True
        font.write(installable_embedding.to_bytes(2, 'big'))
        font.seek(os2_table_pointer)
        checksum = 0
        for i in range(length):
            checksum += ord(font.read(1))
        font.seek(loc)
        font.write(checksum.to_bytes(4, 'big'))
        break


if __name__ == '__main__':
    convert_restricted_font("19700-webfont.ttf")

Çalışır, ama böyle https tarafından IE yükleme yazı sorununu çözmeye sona bu

teşekkürler NobleUplift

C'deki orijinal kaynak burada bulunabilir .