قائمة طعام
مجانا
تسجيل
بيت  /  البرامج الثابتة/ خط سان فرانسيسكو. استخدام خطوط واجهة النظام في تصميم الويب

خط سان فرانسيسكو. استخدام خطوط واجهة النظام في تصميم الويب

مع iOS 13 ، سمحت Apple أخيرًا باستخدام الخطوط المخصصة على أجهزة محمولة. كان تنفيذ هذا الخيار مربكًا إلى حد ما ، ومن الممكن فقط استخدام خطوط تابعة لجهات خارجية في بعض التطبيقات حتى الآن ، مثل مجموعة iWork ، ولكن قد تظل هذه الميزة موضع اهتمام شخص ما.

العمل مع مدير الخطوط

أولاً ، دعنا نتعرف على كيفية استخدام خطوط مختلفة في iOS 13 باستخدام Mail كمثال. ابدأ في كتابة حرف جديد فيه ، وستجد فوق لوحة المفاتيح أيقونة Aa (قد تضطر أولاً إلى النقر فوق السهم لإظهاره<). Нажав на него и выбрав пункт «Шрифт по умолчанию», вы получите доступ к паре сотен предустановленных шрифтов:

تثبيت خطوط الطرف الثالث من متجر التطبيقات

لا يزال هناك عدد قليل من البرامج لتثبيت خطوط الجهات الخارجية في متجر التطبيقات ، وأحد البرامج المجانية هو Font Diner. بعد التثبيت ، قم بتشغيله ، وانقر فوق الزر "تنشيط" في الجزء العلوي الأيمن ، ثم وافق على تثبيت الخطوط المخصصة:


عرض الخطوط المثبتة

بالطبع ، أتاحت Apple إمكانية عرض الخطوط المثبتة وإزالتها. للقيام بذلك ، انتقل إلى الإعدادات> عام> الخطوط:

استخدام خطوط الطرف الثالث

إنه أمر مضحك ، على الرغم من أن تطبيق Mail يحتوي على مدير خطوط ، لا يمكنك استخدام خطوط تابعة لجهات خارجية هناك. لكن في حزمة iWork ، هذا ممكن ، وسنحلل هذا الاحتمال باستخدام Pages كمثال. أدخله المستند المطلوب، ثم انقر فوق رمز الفرشاة في الأعلى وحدد الخط المطلوب من القائمة المنبثقة.

يمكنك إنشاء مواقع ويب جميلة بطباعة رائعة باستخدام مجموعة @ font-face لخط SF UI Text. يمكن استخدام خط الويب و @ font-face اللذان يدعمان جميع المتصفحات الحديثة بشكل مريح.

استخدام هذا الخط على موقع الويب الخاص بك هو مسؤوليتك القانونية. يمكنك التحقق من معلومات ترخيص الخط.


يجب عليك تسجيل الدخول لاستخدام CDN.

@ font-facekit
@ font-face (عائلة الخطوط: "SF UI Text Regular" ؛ نمط الخط: عادي ؛ وزن الخط: عادي ؛ src: local ("SF UI Text Regular") ، url ("SFUIText-Regular.woff") format ("woff")؛) @ font-face (font-family: "SF UI Text Italic" ؛ نمط الخط: عادي ؛ وزن الخط: عادي ؛ src: local ("SF UI Text Italic") ، url ( تنسيق "SFUIText-RegularItalic.woff" ("woff") ؛) @ font-face (مجموعة الخطوط: "SF UI Text Light" ؛ نمط الخط: عادي ؛ وزن الخط: عادي ؛ src: local ("SF UI Text Light ") ، تنسيق url (" SFUIText-Light.woff ") (" woff ") ؛) @ font-face (عائلة الخطوط:" SF UI Text Light Italic "؛ نمط الخط: عادي ؛ وزن الخط : عادي ؛ src: local ("SF UI Text Light Italic") ، تنسيق url ("SFUIText-LightItalic.woff") ("woff") ؛) @ font-face (عائلة الخطوط: "SF UI Text Medium"؛ نمط الخط: عادي ؛ وزن الخط: عادي ؛ src: محلي ("SF UI Text Medium") ، تنسيق url ("SFUIText-Medium.woff") ("woff") ؛) @ font-face (font-family : "SF UI Text Medium Italic" ؛ نمط الخط: عادي ؛ وزن الخط: عادي ؛ src: local ("SF UI Text Medium Italic") ، تنسيق url ("SFUIText-MediumItalic.woff") ("woff") ؛ ) @ font-face (عائلة الخطوط: "SF UI Text Semibold" ؛ نمط الخط: عادي ؛ وزن الخط: عادي ؛ src: local ("SF UI Text Semibold") ، url ("SFUIText-Semibold.woff" ) تنسيق ("woff") ؛) @ font-face (عائلة الخطوط: "SF UI Text Semibold Italic" ؛ نمط الخط: عادي ؛ وزن الخط: عادي ؛ src: local ("SF UI Text Semibold Italic") ، تنسيق url ("SFUIText-SemiboldItalic.woff") ("woff") ؛) @ font-face (عائلة الخطوط: "SF UI Text Bold" ؛ نمط الخط: عادي ؛ وزن الخط: عادي ؛ src: local ("SF UI Text Bold") ، تنسيق url ("SFUIText-Bold.woff") ("woff") ؛) @ font-face (عائلة الخطوط: "SF UI Text Bold Italic" ؛ نمط الخط: عادي ؛ وزن الخط: عادي ؛ src: local ("SF UI Text Bold Italic") ، تنسيق url ("SFUIText-BoldItalic.woff") ("woff") ؛) @ font-face (font-family: "SF UI Text ثقيل "؛ نمط الخط: عادي ؛ وزن الخط: عادي ؛ src: local (" SF UI Text Heavy ") ، تنسيق url (" SFUIText-Heavy.woff ") (" woff ") ؛) @ font-face ( عائلة الخطوط: "SF UI Text Heavy Italic" ؛ نمط الخط: عادي ؛ وزن الخط: عادي ؛ src: local ("SF UI Text Heavy Italic") ، تنسيق url ("SFUIText-HeavyItalic.woff") (" ووف ") ؛ )
عينة html

Fuga doloribus occaecati pariatur.

Rem sint sit a fugiat quae.

Porro eum non incidunt unde ipsa incidunt.

أسئلة متكررة عن العدد الكبير.

Sed labore ea non eaque qui cumque.

إيتاك كريمينسيموس نام نيسي.

Nostrum aut quibusdam المفترض.

Quo quo tenetur maxime fugit doloribus aut.

خطأ شامل يرجع إلى الأشخاص المهمين.

Ducimus sapiente velit eos ex cupiditate.

Sed incidunt minima natus nulla.

اخترع كيوبيدتات ​​أمت أفضل نتيجة.

معاينة
رخصة

تم ترخيص خط سان فرانسيسكو هذا ("خط Apple") لك من قبل شركة Apple Inc. ("Apple") مع مراعاة موافقتك على الشروط التالية وشروط اتفاقية الترخيص لخط Apple San Francisco التي تم تقديمها عند تنزيل خط Apple. إذا كنت لا توافق على هذه الشروط وشروط اتفاقية الترخيص لخط Apple San Francisco ، فلا تستخدم Apple Font.

يجوز لك استخدام Apple Font فقط لإنشاء نماذج لواجهات المستخدم لاستخدامها في منتجات البرامج التي تعمل على iOS أو OS X من Apple نظام التشغيلق ، حسب الاقتضاء. يتضمن الحق السابق الحق في إظهار Apple Font في لقطات الشاشة أو الصور أو النماذج أو غيرها من الصور الرقمية و / أو المطبوعة لمنتجات البرامج التي تعمل فقط على iOS أو OS X.

المنح المنصوص عليها في هذا الترخيص لا تسمح لك ، وأنت توافق على عدم تثبيت أو استخدام أو تشغيل خط Apple لغرض إنشاء نماذج لواجهات المستخدم لاستخدامها في منتجات البرامج التي تعمل على أي شركة غير تابعة لشركة Apple نظام التشغيل أو لتمكين الآخرين من القيام بذلك. لا يجوز لك تضمين Apple Font في أي برامج أو منتجات أخرى. باستثناء ما هو منصوص عليه صراحةً هنا ، لا يجوز لك استخدام Apple Font في إنشاء أو تطوير أو عرض أو توزيع أي وثائق أو عمل فني أو محتوى موقع ويب أو أي منتج عمل آخر.

يجوز لك استخدام خط Apple: (1) للأغراض الموضحة في هذا الترخيص واتفاقية الترخيص لخط Apple San Francisco Font ؛ و (2) فقط إذا كنت أحد مطوري Apple المسجلين وعضوًا مؤهلاً مدفوع الأجر في برنامج Apple Developer ، أو كما هو مسموح به صراحةً من قِبل Apple كتابيًا.

San Francisco هي علامة تجارية لشركة Apple Inc.

حقوق النشر © لعام 2015 لشركة Apple Inc. كل الحقوق محفوظة.

إشعار قانوني

يتم تحميل خطوط الموقع من قبل أعضائنا. عادةً ما تكون معلومات الترخيص التي ذكرها الأعضاء صحيحة ولكن لا يمكننا ضمانها. نحن نولي أهمية كبيرة لحقوق النشر وقد قمنا بتطوير بعض التقنيات للتأكد من عدم حدوث المشكلة المذكورة سابقًا ، كما يعرض النظام تلقائيًا معلومات حقوق النشر الخاصة بالخط هنا. إذا كنت تعتقد أن هذا الخط ينتهك حقوق الطبع والنشر وليس قانونيًا ، فيرجى إخبارنا حتى تتم إزالة الخط أو مراجعته.

يمكنك أيضًا التحقق من الوضع القانوني والتجاري لهذا الخط ؛

يتحمل المستخدمون المسؤولية القانونية لتنزيل هذا الخط واستخدامه.

كل إعلان على Apple هو عمل فني. يتم إنشاء العشرات أو حتى المئات من الصور فقط لجعل المنتج المعلن عنه يبدو بحيث تريد لمسه وتجربته وشرائه. لكن الصور الفوتوغرافية ليست كل ما هو مطلوب لحملة إعلانية ناجحة. هناك مفتاح آخر للنجاح وهو الخطوط التي نريد أن نخبرك عنها اليوم.

نمط النموذج


لجميع المواد الترويجية على موقع Apple.com ، حتى الحروف اللامعة على علبة iGadget الجديدة ، تستخدم Apple نوعًا مختلفًا من الخط Myriad يسمى Myriad Pro SemiBold. تم تصميم Myriad ، وهو محرف sans-serif ، في الأصل في عام 1992 بواسطة Adobe. اليوم ، لا تستخدم Apple هذا الخط فحسب ، بل تستخدمه أيضًا Google (على سبيل المثال ، الأحرف الثلاثة الأخيرة في كلمة "Gmail") و LinkedIn و Rolls-Royce و Walmart. بدأت شركة Apple نفسها في استخدام Myriad في عام 2002.

حتى عام 2002 ، استخدمت Apple نسخة معدلة من خط Garamond في كل مكان تقريبًا. كان هذا البديل يسمى Apple Garamond وربما يكون من الأفضل تذكره لحملة Apple الإعلانية الشهيرة المسماة "Think Different". تم استخدامه أيضًا لجميع اللافتات واللافتات والعلامات الموجودة في مبنى الحرم الجامعي لشركة Apple في كوبرتينو (تم الآن تحويل جميع الحروف إلى خط Myriad). تم تقديم Garamond جنبًا إلى جنب مع Mac الأصلي في عام 1984. ولكن حتى عام 1984 ، استخدمت شركة آبل خط Motter Tektura ، والذي تم استخدامه لجميع منتجاتها. تم استخدام Motter Tektura أيضًا في شعار Reebok لسنوات عديدة.

لكن في المواد التسويقية ، يكون النص صغيرًا جدًا لاستخدام Myriad ، لذلك يستخدمون خط Helvetica Nueu.

لوحات المفاتيح


بالنسبة لجميع لوحات المفاتيح الفعلية ، تستخدم Apple خط VAG Rounded. إذا كنت تقرأ هذه المقالة على iMac أو أي جهاز MacBook ، فابحث عن المفاتيح وسترى VAG Rounded. تم تصميم الخط في الأصل خصيصًا للاستخدام من قبل فولكس فاجن وتم التعرف عليه خصيصًا لنهاياته المتميزة والمستديرة. ظهر VAG Rounded لأول مرة على لوحات مفاتيح Apple في عام 1999 وحدث ذلك على لوحة المفاتيح كمبيوتر محمول أصليكتاب. بعد ذلك ، بدأت Apple في استخدام هذا الخط للوحة المفاتيح على جميع أجهزة الكمبيوتر المحمولة الخاصة بهم ، وهنا لوحات مفاتيح ماكانضم إلى استخدام VAG Rounded فقط في عام 2007.

قبل استخدام خط VAG Rounded ، استخدمت لوحات مفاتيح Apple متغير Univers ، أو بشكل أكثر دقة ، Univers 57. من المرجح أن يتذكر هؤلاء المستخدمون الذين كانوا على دراية بأجهزة كمبيوتر Apple هذا الخط بسبب مظهره النحيف والمائل.

واجهات المستخدم


في الكل إصدارات Macاستخدم OS X خط Lucida Grande لإنشاء عناصر واجهة مستخدم Apple. ظهرت عائلة خطوط Lucida في عام 1985 وتستخدم حاليًا كخط رئيسي لـ مستندات نصيةوالعديد من المواقع. يرجع هذا الانتشار إلى سهولة قراءة النص. بالمناسبة ، يستخدم هذا الخط لشعاره شبكة اجتماعيةفيسبوك.


ولكن على أجهزة iOS الخاصة بهم ، لجميع عناصر واجهة المستخدم ، بما في ذلك عناوين التطبيقات والقوائم و لوحة مفاتيح افتراضية، تستخدم Apple خط Helvetica. ولأجهزة iOS ذات شاشة Retina وهي iPhone 4 ، iPad الجديد- يتم استخدام نسخة أوضح من الخط - Helvetica Neue.

مصدرها www.applegazette.com

استخدمت Apple مجموعة خط Helvetica كخط نظام لنظام iOS منذ إصدار أول iPhone. قاموا أيضًا باستبدال Lucida Grande في نظام التشغيل Mac OS X بدءًا من الإصدار 10.10 Yosemite. فلماذا قررت شركة آبل الآن التخلص من أكثر الخطوط المحبوبة في العالم؟

أصبح نظام التشغيل iOS 9 الآن متاحًا رسميًا للجميع ، وقد حلت عائلة خطوط جديدة تسمى San Francisco محل Helvetica Neue بمهارة.


هيلفيتيكا (يسار) وسان فرانسيسكو (يمين)

بحلول هذا الوقت تم استخدامها بالفعل في ساعة آبل. الآن أصبح سان فرانسيسكو خطًا قياسيًا واحدًا لجميع منتجات النظام الأساسي: Apple Watch و iPhone و iPad و Mac.

استخدمت Apple عائلة Helvetica كخط نظام لنظام iOS منذ إصدار أول هاتف iPhone. قاموا أيضًا باستبدال Lucida Grande في نظام التشغيل Mac OS X بدءًا من الإصدار 10.10 Yosemite. فلماذا قررت شركة آبل الآن التخلص من أكثر الخطوط المحبوبة في العالم؟

الحجم الصغير هو نقطة ضعف Helvetica

هناك رأي مفاده أن Helvetica غير مناسب لأحجام النصوص الصغيرة. عندما حلت Helvetica محل العائلة السابقة في Mac OS X Yosemite ، وجد العديد من المصممين أن هذا البديل غير مناسب.


"Helvetica sucks" من مدونة Erik Spiekermann.

يمكنك التحقق من ضعف قراءة Helvetica على النحو التالي. اكتب نصًا صغيرًا وقم بطمسه. في نفس الوقت ، بعض شظاياها "مختلطة" بحيث يصعب تحليل محتوياتها. يقال إن شركة Apple صممت عائلة San Francisco لمجرد جعل النص الصغير على Apple Watch أكثر وضوحًا.

ومع ذلك ، فإن دقة الأجهزة الذكية الحديثة تتجاوز دقة المنشور المطبوع ، كما أن النصوص الموجودة على iPhone ليست دائمًا صغيرة مثل Apple Watch. لماذا إذن استبدلت Apple ليس فقط Apple Watch ، ولكن أيضًا iOS و Mac OS X؟

سان فرانسيسكو - متنوع
تتميز خطوط سان فرانسيسكو بالعديد من الميزات التي تسهل قراءتها. في الواقع ، إصدار San Francisco لـ Apple Watch وإصدار iOS / Mac هما خطان مختلفان.

تُستخدم عائلة الخطوط المسماة "SF" لنظام التشغيل iOS / Mac بينما يتم استخدام "SF Compact" في Apple Watch. يمكنك أن ترى الفرق مع الأحرف المقربة مثل "o" و "e". الخطوط العمودية في SF Compact أكثر انبساطًا مما كانت عليه في SF.

يتسبب هذا الاختلاف في زيادة المسافة البادئة بين الأحرف للنص المكتوب باستخدام SF Compact ، مما ينتج عنه نص أكثر وضوحًا عند قراءته على أجهزة صغيرة مثل Apple Watch.

بالإضافة إلى ذلك ، يتم تقسيم كل عائلة إلى فئتين فرعيتين: "نص" و "عرض". آبل تسميها "مقاسات بصرية". الفئة الفرعية للنص مخصصة لأحجام النص الصغيرة ، في حين أن الفئة الفرعية للعرض مخصصة لأحجام النص الكبيرة.


عائلة خطوط سان فرانسيسكو

كما ذكرنا أعلاه ، فإن الخطوط الغريبة (أو sans serif) مثل Helvetica لها حرفان متجاوران "مزيج" وأحرف مثل "a" و "e" تصبح متشابهة جدًا في أحجام النص الصغيرة.


مقارنة المسافات البادئة بين الأحرف في خطوط فئتي العرض والنص


مقارنة بين خطوط فئتي العرض والنص في مثال حرف واحد

تم تصميم مجموعة النص الفرعية ، في نفس الوقت ، بطريقة تزيد المسافات البادئة بين الأحرف الموجودة فيها مقارنة بأحرف عائلة العرض الفرعية ، ويتم توسيع الفجوات الموجودة فيها لتحسين إمكانية القراءة في أحجام النص الصغيرة.

سان فرانسيسكو ديناميكية

أحد الأشياء الرائعة في سان فرانسيسكو هو أن سماعة الرأس تم تحسينها ديناميكيًا. العرض والنص يستبدلان بعضهما البعض حسب حجم النص المعروض. العتبة هنا 20 نقطة.

لا داعي للقلق من المصممين والمهندسين بشأن اختيار الخيار الصحيح من العائلة. نضيف فقط خط النظام إلى UILabel ، على سبيل المثال. سيحدد النظام سماعة الرأس التي تحتاجها.

لكن الأمر المثير للإعجاب حقًا في خطوط سان فرانسيسكو هو كيفية عرضها للنقطتين. عادةً ما نراه في الخطوط الأخرى أعلى الخط السفلي مباشرةً ، لذلك في الحالات التي تكون فيها بين الأرقام ، لا يتم توسيط النقطتين عموديًا. ومع ذلك ، في خطوط سان فرانسيسكو ، تحدث هذه المحاذاة تلقائيًا.


محاذاة النقطتين تلقائيًا في الوسط عموديًا

جاءت سان فرانسيسكو إلينا من العصر الرقمي

كما ترى ، تم تصميم خطوط سان فرانسيسكو وتصميمها بحيث يمكن قراءتها بسهولة عن طريق النص من أي حجم وعلى أي جهاز.

تم إنشاء Helvetica ، التي حلت محلها ، في سويسرا في عام 1957 ، عندما لم يكن هناك الأجهزة الرقمية. ومع ذلك ، لا تزال العديد من الشركات تستخدمه كمحرف للشركات ، ولا شك أنه سيستمر في استخدامه كمحرف كلاسيكي جيد في المستقبل.

من ناحية أخرى ، فإن سان فرانسيسكو محرف حديث. يتغير شكله بشكل ديناميكي ، وفقًا للسياق. يمكن أن يطلق عليه نوع من "الخط الأصلي" للعصر الرقمي.

منتجات Apple عصرية. يستخدم مطورو iPhone و iPad تصميمًا مميزًا وخط iOS خاصًا يمنح الأدوات الأنيقة أناقة خاصة. غالبًا ما يصبح رواد الأعمال ورجال الأعمال والمهندسون المعماريون والمصممين مستخدمين لأدوات "آبل" ، الذين يتعاملون مع أنماط النص المستخدمة في كل من نظام iOS نفسه وفي التطبيقات المثبتة على جهاز لوحي أو هاتف ذكي بوقار خاص.

تطبيقات خطوط iOS:

  • الخطوط.
  • FontBrowser ؛
  • مصمم الخطوط
  • مضمد الخط الحرة ؛
  • صانع الخط
  • خطوط رائعة
  • فونتو.
  • منسق.
  • ما الخط ؛
  • سوبر TXT
  • بايت الخط 2 ؛
  • معاينة معرض الخطوط ؛
  • الأسطح.

أشهر الخطوط لأجهزة iPhone و iPad

Apple هي شركة ديناميكية تعمل باستمرار على تحسين تصميم الأجهزة و نظام التشغيل. تستخدم صناديق جميع أدوات Apple بدون استثناء خط Myriad Pro Semibold sans-serif ، والذي تستخدمه أيضًا Rolls-Royse و Walmart وحتى Google. تحتوي لوحة مفاتيح أي جهاز Mac بالضرورة على نمط VagRounded المطبق عليها.

واجهة هذه الأجهزة تستخدم Lucida Grande. استخدم iPhone و iPad الخط Helvetica قبل شاشة Retina ، و Helvetica neue بعده. هذا الخط ليس حصريًا - تم استخدامه بنجاح بواسطة علامة 3M التجارية ، اهتمام BMW. على الرغم من مكون الصورة المرتفع ، فإن العديد من الخبراء يشككون في التطبيق العملي للأنماط المستخدمة في أدوات Apple. قدم متخصصو الشركة مثل هذا السيناريو ، بحيث يتمكن كل مستخدم لهاتف ذكي أو جهاز لوحي من "آبل" من تخصيص المعلومات المعروضة على الشاشة "لأنفسهم".

كيفية إضافة الخطوط على iOS

يمكن لأي مالك لجهاز iPhone أو iPad الانتقال إلى أي من التطبيقات المذكورة أعلاه واختياره بنفسه. سيسمح لك هذا الخيار باستخدام عمل يوميباستخدام أداة ، بعض الأنماط الخاصة (على سبيل المثال ، خط Roboto). غالبًا ما يستخدم المصممون تطبيقات الخطوط على نظام iOS لمشاريعهم.

كيفية تغيير الخطوط على iOS

لا يجوز لمستخدمي أجهزة Apple استخدام ملفات تطبيقات الطرف الثالثلحل مشكلة الخط مع نظام التشغيل iOS - يكفي استخدام الإمكانات المضمنة للأدوات الذكية. إنه يوفر لمالكي الأجهزة اللوحية والهواتف الذكية ذات العلامات التجارية فرصًا كبيرة لتغيير نمط النص في الإعدادات ، بالإضافة إلى خيار Dynamic Type (تعديل الحجم البصري) ، المدمج في iOS 7.

النوع الديناميكي

خط iOS 7 الافتراضي هو Helvetica neue. يمكنك تغيير نمط النص لتحسين إمكانية القراءة باستخدام الطبقات ، والتي تُستخدم لمقارنة خصائص الخطوط المستخدمة بصريًا.

منزلقات خاصة مع سبعة مستويات من التثبيت ( الإعدادات - عام - حجم النص) يتيح لك ضبط حجم النص المعروض في التطبيق بسرعة. بالنسبة لأولئك الذين ليسوا راضين عن الحد الأقصى لقيمة الخط المحددة إعدادات iOSوالمطورين منصة متنقلةنفذت الخيار إعدادات - عامة - إمكانية الوصول.

يتيح لك هذا الخيار استخدام ملفات أكبر مقاسالخط ، لتحقيق زيادة في تباينه ، مما يزيد بشكل كبير من قابلية قراءة المحتوى للأشخاص الذين يعانون من مشاكل في الرؤية.